Navbar

HTML + Bootstrap

<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
  <div class="container-fluid">
    <a class="navbar-brand fw-bold" href="#">CodeMIRAI</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Practice</a></li>
      </ul>
    </div>
  </div>
</nav>
<p class="p-3">This preview is narrower than the <code>lg</code> breakpoint, so the links are tucked behind the menu button. Click it.</p>

How the parts fit together:

Part	Job
`navbar navbar-expand-lg`	a navbar that shows its links in a row from `lg` up, and collapses below it
`navbar-brand`	the logo or site name
`navbar-toggler`	the menu button, shown only while collapsed
`collapse navbar-collapse`	the part that hides and shows; its `id` matches the toggler's `data-bs-target`
`navbar-nav`, `nav-item`, `nav-link`	the list of links
`active` and `aria-current="page"`	marks the current page, visually and for screen readers

The menu button works through Bootstrap's JavaScript, which the preview loads for you. On your own page, include bootstrap.bundle.min.js.

Always expanded, and on the right

HTML + Bootstrap

<nav class="navbar navbar-expand-md bg-body-tertiary border-bottom">
  <div class="container">
    <a class="navbar-brand" href="#">📚 Learn</a>
    <ul class="navbar-nav ms-auto flex-row gap-3">
      <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
      <li class="nav-item"><a class="btn btn-primary btn-sm" href="#">Sign up</a></li>
    </ul>
  </div>
</nav>

navbar-expand-md expands from 768px, which this preview reaches. ms-auto on the list pushes the links to the right of the brand.

HTML + Bootstrap

<nav class="navbar navbar-expand bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Shop</a>
    <ul class="navbar-nav me-auto">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Categories</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Keyboards</a></li>
          <li><a class="dropdown-item" href="#">Monitors</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">All products</a></li>
        </ul>
      </li>
    </ul>
    <form class="d-flex" role="search">
      <input class="form-control form-control-sm me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light btn-sm" type="submit">Go</button>
    </form>
  </div>
</nav>
<div style="height: 160px"></div>

data-bs-theme="dark" switches the navbar's text and icons to light colours, for a dark background.
navbar-expand, with no breakpoint, never collapses.
A dropdown needs dropdown on the item, data-bs-toggle="dropdown" on its link, and a dropdown-menu list. Click Categories to open it.

Keeping it on screen

Add sticky-top to the navbar to keep it at the top of the window while the page scrolls, or fixed-top to fix it there permanently. A fixed navbar covers the top of the page, so the page's content then needs some top padding.

A responsive navbar

Always expanded, and on the right

A dark navbar with a dropdown and a search box

Keeping it on screen