---
# System prepended metadata

title: Blazor のテンプレートプロジェクトにサブメニューを追加する 2024-02-04
tags: [テンプレート, Bootstrap, サブメニュー, Blazor]

---

---
lang: ja-jp
breaks: true
---
# Blazor のテンプレートプロジェクトにサブメニューを追加する 2024-02-04

:::warning
Bootstrapを使用した一階層までの簡易的なサブメニューです。
:::

![image](https://hackmd.io/_uploads/B1wdfh3cT.png)

![image](https://hackmd.io/_uploads/Sk3Fz325a.png)


## プロジェクトテンプレート

![image](https://hackmd.io/_uploads/SJboZn2q6.png)

![image](https://hackmd.io/_uploads/SkehW32ca.png)


## Bootstrap の設定

* App.razor
```htmlembedded=
<!DOCTYPE html>
<html lang="ja">

<head>
・・・
    <!-- Bootstrapのバージョンを上げる
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
          crossorigin="anonymous">
・・・
    <HeadOutlet />
</head>

<body>
・・・
    <!-- Bootstrapのバージョンを上げる
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    -->
    <script src="https://cdn.jsdelivr.net/npm/@@popperjs/core@2.11.7/dist/umd/popper.min.js"
            integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
            crossorigin="anonymous">
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
            crossorigin="anonymous">
    </script>

    <script src="_framework/blazor.web.js"></script>
</body>

</html>    
```

## NavMenu.razor.js を追加する

```javascript=
function onclick_nav(
    event
) {
    let navbar_toggle = document.querySelector('.navbar-toggler');
    if (navbar_toggle == null) {
        return;
    }

    var doClose = true;

    let dropdown_toggles = document.querySelectorAll('.dropdown-toggle');
    if (dropdown_toggles != null) {
        dropdown_toggles.forEach((dropdown_toggle) => {
            if (dropdown_toggle == event.target) {
                doClose = false;
                return;
            }
        });
    }
    if (doClose == false) {
        return;
    }

    let dropdowns = document.querySelectorAll('.dropdown');
    if (dropdowns != null) {
        dropdowns.forEach((dropdown) => {
            if (dropdown == event.target) {
                doClose = false;
                return;
            }
        });
    }
    if (doClose == false) {
        return;
    }

    // クリックすると `dropdown-menu` が閉じてしまうのでチェック状態を反転する。
    //navbar_toggle.click();
    navbar_toggle.checked = !navbar_toggle.checked;
}
```

## NavMenu.razor.css に一部追加

* 以下を追加
```css=
・・・
.dropdown-divider {
    border-color: #d7d7d7;
    border-width: 1px;
    border-style: solid;
}

.dropdown-menu.show {
    display: contents;
} 
```

## NavMenu.razor

```htmlmixed
<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorMsDoc</a>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<script src="/Components/Layout/NavMenu.razor.js"></script>

<!--
    `onclick` の処理を `onclick_nav(event)` に変更する。
-->
<div class="nav-scrollable" onclick="onclick_nav(event)">

    <nav class="flex-column">
・・・
        <div class="nav-item px-3">
            <hr class="dropdown-divider">
        </div>

        <div class="nav-item px-3 dropdown">
            <a class="nav-link dropdown-toggle"
               data-bs-toggle="dropdown"
               href="#"
               role="button"
               aria-expanded="false">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Fundamentals
            </a>
            <div class="dropdown-menu">
                <div class="nav-item px-3">
                    <NavLink class="nav-link dropdown-item" href="Fundamentals/StaticFilesExample">
                        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Static Files
                    </NavLink>
                </div>
            </div>
        </div>

        <div class="nav-item px-3 dropdown">
            <a class="nav-link dropdown-toggle"
               data-bs-toggle="dropdown"
               href="#"
               role="button"
               aria-expanded="false">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Components
            </a>
            <div class="dropdown-menu">
                <div class="nav-item px-3">
                    <NavLink class="nav-link dropdown-item" href="Components/SynchronizationContextExample">
                        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Synchronization Context
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link dropdown-item" href="components/OverwritingParameters">
                        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Overwriting Parameters
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link dropdown-item" href="Components/EventHandlingExample">
                        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Event Handling
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link dropdown-item" href="Components/DataBindingExample">
                        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Data Binding
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link dropdown-item" href="Components/LifecycleExample">
                        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Lifecycle
                    </NavLink>
                </div>
            </div>
        </div>
    </nav>
</div>
```

###### tags: `Blazor` `テンプレート` `サブメニュー` `Bootstrap`
