منو (Navbar)

<!-- Light navbar: Dark links against light background -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
  <div class="container">
    <a href="#" class="navbar-brand me-2 me-xl-4">
      <img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
    </a>
    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <a href="#" class="btn btn-primary btn-sm ms-2 order-lg-3">
      <i class="fi-plus me-2"></i>Add<span class='d-none d-sm-inline'> listing</span>
    </a>
    <div class="collapse navbar-collapse order-lg-2" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li>
              <a href="#" class="dropdown-item">Action link</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-item dropdown-toggle">Dropdown</a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#" class="dropdown-item">Action link</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Another action</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Something else here</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Yet another link</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#" class="dropdown-item">Another action</a>
            </li>
            <li class="dropdown-divider"></li>
            <li>
              <a href="#" class="dropdown-item">Something else here</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</header>

// Light navbar: Dark links against light background
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
  .container
    a(href="#").navbar-brand.me-2.me-xl-4
      img(src="path-to-logo-image", width="116", alt="Finder").d-block
    button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarNav", aria-controls="navbarNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
      span.navbar-toggler-icon
    a(href="#").btn.btn-primary.btn-sm.ms-2.order-lg-3
      i.fi-plus.me-2
      | Add<span class="d-none d-sm-inline"> listing</span>
    #navbarNav.collapse.navbar-collapse.order-lg-2
      ul.navbar-nav
        li.nav-item.active
          a(href="#").nav-link Home
        li.nav-item
          a(href="#").nav-link Link
        li.nav-item.dropdown
          a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").nav-link.dropdown-toggle Dropdown
          ul.dropdown-menu
            li: a(href="#").dropdown-item Action link
            li.dropdown
              a(href="#").dropdown-item.dropdown-toggle Dropdown
              ul.dropdown-menu
                li: a(href="#").dropdown-item Action link
                li: a(href="#").dropdown-item Another action
                li: a(href="#").dropdown-item Something else here
                li: a(href="#").dropdown-item Yet another link
            li: a(href="#").dropdown-item Another action
            li.dropdown-divider 
            li: a(href="#").dropdown-item Something else here
        li.nav-item
          a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled Disabled

<!-- Dark navbar: Light links against dark background -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a href="#" class="navbar-brand me-2 me-xl-4">
      <img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
    </a>
    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDarkNav" aria-controls="navbarDarkNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <a href="#" class="btn btn-primary btn-sm ms-2 order-lg-3">
      <i class="fi-plus me-2"></i>Add<span class='d-none d-sm-inline'> listing</span>
    </a>
    <div class="collapse navbar-collapse order-lg-2" id="navbarDarkNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li>
              <a href="#" class="dropdown-item">Action link</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-item dropdown-toggle">Dropdown</a>
              <ul class="dropdown-menu dropdown-menu-dark">
                <li>
                  <a href="#" class="dropdown-item">Action link</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Another action</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Something else here</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Yet another link</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#" class="dropdown-item">Another action</a>
            </li>
            <li class="dropdown-divider"></li>
            <li>
              <a href="#" class="dropdown-item">Something else here</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</header>

// Dark navbar: Light links against dark background
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
  .container
    a(href="#").navbar-brand.me-2.me-xl-4
      img(src="path-to-logo-image", width="116", alt="Finder").d-block
    button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarDarkNav", aria-controls="navbarDarkNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
      span.navbar-toggler-icon
    a(href="#").btn.btn-primary.btn-sm.ms-2.order-lg-3
      i.fi-plus.me-2
      | Add<span class="d-none d-sm-inline"> listing</span>
    #navbarDarkNav.collapse.navbar-collapse.order-lg-2
      ul.navbar-nav
        li.nav-item.active
          a(href="#").nav-link Home
        li.nav-item
          a(href="#").nav-link Link
        li.nav-item.dropdown
          a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").nav-link.dropdown-toggle Dropdown
          ul.dropdown-menu.dropdown-menu-dark
            li: a(href="#").dropdown-item Action link
            li.dropdown
              a(href="#").dropdown-item.dropdown-toggle Dropdown
              ul.dropdown-menu.dropdown-menu-dark
                li: a(href="#").dropdown-item Action link
                li: a(href="#").dropdown-item Another action
                li: a(href="#").dropdown-item Something else here
                li: a(href="#").dropdown-item Yet another link
            li: a(href="#").dropdown-item Another action
            li.dropdown-divider 
            li: a(href="#").dropdown-item Something else here
        li.nav-item
          a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled Disabled

<!-- Accent navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-accent">
  <div class="container">
    <!-- Navbar content goes here -->
  </div>
</header>

<!-- Secondary navbar -->
<header class="navbar navbar-expand-lg navbar-light bg-secondary">
  <div class="container">
    <!-- Navbar content goes here -->
  </div>
</header>

// Accent navbar
header.navbar.navbar-expand-lg.navbar-dark.bg-accent
  .container
    // Navbar content goes here

// Secondary navbar
header.navbar.navbar-expand-lg.navbar-light.bg-secondary
  .container
    // Navbar content goes here

<!-- Navbar with user account dropdown -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
  <div class="container">
    <a href="#" class="navbar-brand flex-shrink-0 me-2 me-xl-4">
      <img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
    </a>
    <button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarUserNav" aria-controls="navbarUserNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="dropdown order-lg-3">
      <a href="#" class="d-inline-block py-1" data-bs-toggle="dropdown">
        <img class="rounded-circle" src="path-to-user-avatar-image" width="40" alt="User">
      </a>
      <div class="dropdown-menu dropdown-menu-end">
        <div class="d-flex align-items-start border-bottom px-3 py-1 mb-2" style="width: 16rem;">
          <img class="rounded-circle" src="path-to-user-avatar-image" width="48" alt="User">
          <div class="ps-2">
            <h6 class="fs-base mb-0">Robert Fox</h6>
            <div class="star-rating star-rating-sm">
              <i class="star-rating-icon fi-star-filled active"></i>
              <i class="star-rating-icon fi-star-filled active"></i>
              <i class="star-rating-icon fi-star-filled active"></i>
              <i class="star-rating-icon fi-star-filled active"></i>
              <i class="star-rating-icon fi-star-filled active"></i>
            </div>
            <div class="fs-xs py-2">(302) 555-0107<br>robert_fox@gmail.com</div>
          </div>
        </div>
        <a href="#" class="dropdown-item">
          <i class="fi-user opacity-60 me-2"></i>
          Personal Info
        </a>
        <a href="#" class="dropdown-item">
          <i class="fi-lock opacity-60 me-2"></i>
          Password & Security
        </a>
        <a href="#" class="dropdown-item">
          <i class="fi-list opacity-60 me-2"></i>
          My Listings
        </a>
        <a href="#" class="dropdown-item">
          <i class="fi-heart opacity-60 me-2"></i>
          Wishlist
        </a>
        <a href="#" class="dropdown-item">
          <i class="fi-star opacity-60 me-2"></i>
          Reviews
        </a>
        <a href="#" class="dropdown-item">
          <i class="fi-bell opacity-60 me-2"></i>
          Notifications
        </a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Help</a>
        <a href="#" class="dropdown-item">Sign Out</a>
      </div>
    </div>
    <div class="collapse navbar-collapse order-lg-2" id="navbarUserNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Features</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Pricing</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
      </ul>
    </div>
  </div>
</header>

// Navbar with user account dropdown
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
  .container
    a(href="#").navbar-brand.flex-shrink-0.me-2.me-xl-4
      img(src="path-to-logo-image", width="116", alt="Finder").d-block
    button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarUserNav", aria-controls="navbarUserNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
      span.navbar-toggler-icon
    .dropdown.order-lg-3
      a(href="#", data-bs-toggle="dropdown").d-inline-block.py-1
        img(src="path-to-user-avatar-image", width="40", alt="User").rounded-circle
      .dropdown-menu.dropdown-menu-end
        .d-flex.align-items-start.border-bottom.px-3.py-1.mb-2(style="width: 16rem;")
          img(src="path-to-user-avatar-image", width="48", alt="User").rounded-circle
          .ps-2
            h6.fs-base.mb-0 Robert Fox
            +star-rating(5,"sm")
            .fs-xs.py-2
              | (302) 555-0107
              br
              | robert_fox@gmail.com
        a(href="#").dropdown-item
          i.fi-user.opacity-60.me-2
          | Personal Info
        a(href="#").dropdown-item
          i.fi-lock.opacity-60.me-2
          | Password & Security
        a(href="#").dropdown-item
          i.fi-list.opacity-60.me-2
          | My Listings
        a(href="#").dropdown-item
          i.fi-heart.opacity-60.me-2
          | Wishlist
        a(href="#").dropdown-item
          i.fi-star.opacity-60.me-2
          | Reviews
        a(href="#").dropdown-item
          i.fi-bell.opacity-60.me-2
          | Notifications
        .dropdown-divider
        a(href="#").dropdown-item
          | Help
        a(href="#").dropdown-item
          | Sign Out
    #navbarUserNav.collapse.navbar-collapse.order-lg-2
      ul.navbar-nav
        li.nav-item.active
          a(href="#").nav-link
            | Home
        li.nav-item
          a(href="#").nav-link
            | Features
        li.nav-item
          a(href="#").nav-link
            | Pricing
        li.nav-item
          a(href="#").nav-link
            | About

<!-- Navbar with search field -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
  <div class="container">
    <a href="#" class="navbar-brand flex-shrink-0 me-2 me-xl-4">
      <img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
    </a>
    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearchNav" aria-controls="navbarSearchNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Search visible on desktop -->
    <div class="input-group input-group-sm d-none d-lg-flex ps-2 ps-xxl-5 order-lg-3">
      <i class="fi-search position-absolute text-muted top-50 translate-middle-y ms-2"></i>
      <input class="form-control border-top-0 border-start-0 border-end-0 rounded-0" type="search" placeholder="Search site...">
    </div>

    <div class="collapse navbar-collapse order-lg-2" id="navbarSearchNav">
      
      <!-- Search visible on mobile -->
      <div class="d-lg-none bg-secondary border mx-n3 p-3 mt-3">
        <div class="input-group">
          <i class="fi-search position-absolute text-muted top-50 translate-middle-y ps-1 ms-2"></i>
          <input class="form-control rounded-2" type="search" placeholder="Search site...">
        </div>
      </div>

      <!-- Navigation -->
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</header>

// Navbar with search field
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
  .container
    a(href="#").navbar-brand.flex-shrink-0.me-2.me-xl-4
      img(src="path-to-logo-image", width="116", alt="Finder").d-block
    button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarSearchNav", aria-controls="navbarSearchNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
      span.navbar-toggler-icon

    // Search visible on desktop
    .input-group.input-group-sm.d-none.d-lg-flex.ps-2.ps-xxl-5.order-lg-3
      i.fi-search.position-absolute.text-muted.top-50.translate-middle-y.ms-2
      input(type="search", placeholder="Search site...").form-control.border-top-0.border-start-0.border-end-0.rounded-0

    #navbarSearchNav.collapse.navbar-collapse.order-lg-2

      // Search visible on mobile
      .d-lg-none.bg-secondary.border.mx-n3.p-3.mt-3
        .input-group
          i.fi-search.position-absolute.text-muted.top-50.translate-middle-y.ps-1.ms-2
          input(type="search", placeholder="Search site...").form-control.rounded-2
      
      // Navigation
      ul.navbar-nav
        li.nav-item.active
          a(href="#").nav-link Home
        li.nav-item
          a(href="#").nav-link Features
        li.nav-item
          a(href="#").nav-link Pricing
        li.nav-item
          a(href="#").nav-link About

<!-- Navbar with offcanvas menu on mobile -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
  <div class="container">
    <a href="#" class="navbar-brand me-2 me-xl-4">
      <img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
    </a>
    <button type="button" class="navbar-toggler ms-auto" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a href="#" class="btn btn-primary btn-sm ms-2 order-lg-3">
      <i class="fi-plus me-2"></i>
      Add<span class='d-none d-sm-inline'> listing</span>
    </a>
    <div class="offcanvas offcanvas-start order-lg-2" id="navbarNav">
      <div class="offcanvas-header shadow-sm">
        <h6 class="offcanvas-title">Menu</h6>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav mt-0">
          <li class="nav-item active">
            <a href="#" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#" class="dropdown-item">Action link</a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-item dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#" class="dropdown-item">Action link</a>
                  </li>
                  <li>
                    <a href="#" class="dropdown-item">Another action</a>
                  </li>
                  <li>
                    <a href="#" class="dropdown-item">Something else here</a>
                  </li>
                  <li>
                    <a href="#" class="dropdown-item">Yet another link</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" class="dropdown-item">Another action</a>
              </li>
              <li>
                <a href="#" class="dropdown-item">Something else here</a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

// Navbar with offcanvas menu on mobile
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
  .container
    a(href="#").navbar-brand.me-2.me-xl-4
      img(src="path-to-logo-image", width="116", alt="Finder").d-block
    button(type="button", data-bs-toggle="offcanvas", data-bs-target="#navbarNav", aria-controls="navbarNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
      span.navbar-toggler-icon
    a(href="#").btn.btn-primary.btn-sm.ms-2.order-lg-3
      i.fi-plus.me-2
      | Add<span class="d-none d-sm-inline"> listing</span>
    #navbarNav.offcanvas.offcanvas-start.order-lg-2
      .offcanvas-header.shadow-sm
        h6.offcanvas-title Menu
        button(type="button", data-bs-dismiss="offcanvas").btn-close
      .offcanvas-body
        ul.navbar-nav.mt-0
          li.nav-item.active
            a(href="#").nav-link
              | Home
          li.nav-item
            a(href="#").nav-link
              | Link
          li.nav-item.dropdown
            a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").nav-link.dropdown-toggle
              | Dropdown
            ul.dropdown-menu
              li
                a(href="#").dropdown-item
                  | Action link
              li.dropdown
                a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").dropdown-item.dropdown-toggle
                  | Dropdown
                ul.dropdown-menu
                  li
                    a(href="#").dropdown-item
                      | Action link
                  li
                    a(href="#").dropdown-item
                      | Another action
                  li
                    a(href="#").dropdown-item
                      | Something else here
                  li
                    a(href="#").dropdown-item
                      | Yet another link
              li
                a(href="#").dropdown-item
                  | Another action
              li
                a(href="#").dropdown-item
                  | Something else here
          li.nav-item
            a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled
              | Disabled