Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Navbar

Responsive navigation header that includes support for branding, navigation, and more.

Bootstrap docs

Add class navbar-sticky to navbar to make it stick to the top of the page when scrolling.

## Supported content

    <!-- Menu with dropdown + Button -->
    <header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
      <div class="container">
        <a href="#" class="navbar-brand">
          <img src="assets/img/logo.svg" width="47" alt="Silicon">
          Silicon
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1" aria-expanded="false">
          <span class="navbar-toggler-icon"></span>
        </button>
        <nav id="navbarCollapse1" class="collapse navbar-collapse">
          <hr class="d-lg-none mt-3 mb-2">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a href="#" class="nav-link active">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" data-bs-toggle="dropdown" data-bs-auto-close="outside" 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" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action link</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><a class="dropdown-item" href="#">Yet another link</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item" href="#"> Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <a href="#" class="btn btn-primary btn-sm fs-sm rounded my-3 my-lg-0">
            <i class="bx bx-user fs-lg me-2"></i>
            Sign up
          </a>
        </nav>
      </div>
    </header>

    <!-- Menu + Theme mode switch + Button -->
    <header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
      <div class="container">
        <a href="#" class="navbar-brand">
          <img src="assets/img/logo.svg" width="47" alt="Silicon">
          Silicon
        </a>
        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2" aria-expanded="false">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="form-check form-switch mode-switch order-lg-2 ms-4 ms-lg-auto me-lg-4" data-bs-toggle="mode">
          <input type="checkbox" class="form-check-input" id="theme-mode">
          <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label>
          <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label>
        </div>
        <a href="#" class="btn btn-secondary btn-sm fs-sm rounded order-lg-3 d-none d-lg-inline-flex">
          <i class="bx bx-log-in fs-lg me-2"></i>
          Sign in
        </a>
        <nav id="navbarCollapse2" class="collapse navbar-collapse">
          <hr class="d-lg-none mt-3 mb-2">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a href="#" class="nav-link active">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Services</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
          </ul>
          <a href="#" class="btn btn-secondary btn-sm fs-sm rounded my-3 d-lg-none">
            <i class="bx bx-log-in fs-lg me-2"></i>
            Sign in
          </a>
        </nav>
      </div>
    </header>

    <!-- Menu + Search + Account + Shopping cart -->
    <header class="d-flex flex-column bg-light shadow-sm">
      <div id="searchCollapse" class="collapse order-lg-2">
        <div class="container py-3 pt-lg-2 pb-lg-4">
          <div class="position-relative">
          <input type="search" class="form-control form-control-lg ps-5" placeholder="Search...">
          <i class="bx bx-search fs-5 text-muted position-absolute top-50 start-0 translate-middle-y ms-3"></i>
          </div>
        </div>
      </div>
      <div class="navbar navbar-expand-lg navbar-light order-lg-1">
        <div class="container">
          <a href="#" class="navbar-brand">
            <img src="assets/img/logo.svg" width="47" alt="Silicon">
            Silicon
          </a>
          <div class="d-flex align-items-center order-lg-2 ms-auto">
            <a href="#searchCollapse" class="nav-link px-2" data-bs-toggle="collapse">
              <i class="bx bx-search fs-4 mx-1"></i>
            </a>
            <a href="#" class="nav-link d-none d-lg-block px-2">
              <i class="bx bx-user fs-4 mx-1"></i>
            </a>
            <a href="#" class="btn btn-icon btn-secondary rounded-circle position-relative ms-2">
              <span class="badge bg-danger rounded-circle position-absolute top-0 start-100 translate-middle-x ms-n1 mt-n2">2</span>
              <i class="bx bx-cart fs-4"></i>
            </a>
          </div>
          <button class="navbar-toggler ms-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
          </button>
          <nav id="navbarCollapse3" class="collapse navbar-collapse">
            <hr class="d-lg-none mt-3 mb-2">
            <ul class="navbar-nav me-auto">
              <li class="nav-item">
                <a href="#" class="nav-link active">Home</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Services</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">About</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Contacts</a>
              </li>
              <li class="d-lg-none my-2"><hr></li>
              <li class="nav-item d-lg-none">
                <a href="#" class="nav-link">
                  <i class="bx bx-user fs-5 me-2"></i>
                  My account
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

    <!-- Menu + Contact (Phone / Email) links -->
    <header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
      <div class="container">
        <a href="#" class="navbar-brand">
          <img src="assets/img/logo.svg" width="47" alt="Silicon">
          Silicon
        </a>
        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse4" aria-expanded="false">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="d-flex d-lg-none order-lg-3">
          <a href="tel:4055550128" class="nav-link px-2 ms-2">
            <i class="bx bx-mobile-alt fs-2"></i>
          </a>
          <a href="mailto:hello@example.com" class="nav-link px-2">
            <i class="bx bx-chat fs-2"></i>
          </a>
        </div>
        <div class="d-none d-lg-flex order-lg-3">
          <a href="tel:4055550128" class="d-flex align-items-center text-decoration-none ms-4">
            <i class="bx bx-mobile-alt fs-2 text-primary"></i>
            <div class="fs-sm text-nowrap ps-2">
              <h6 class="fs-sm mb-0">Call us</h6>
              <span class="text-nav">(405) 555-0128</span>
            </div>
          </a>
          <a href="mailto:hello@example.com" class="d-flex align-items-center text-decoration-none ms-4">
            <i class="bx bx-chat fs-2 text-primary"></i>
            <div class="fs-sm ps-2">
              <h6 class="fs-sm mb-0">Talk to us</h6>
              <span class="text-nav">hello@example.com</span>
            </div>
          </a>
        </div>
        <nav id="navbarCollapse4" class="collapse navbar-collapse order-lg-2">
          <hr class="d-lg-none mt-3 mb-2">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a href="#" class="nav-link active">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Services</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- User logged in state. User account dropdown -->
    <header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
      <div class="container">
        <a href="#" class="navbar-brand">
          <img src="assets/img/logo.svg" width="47" alt="Silicon">
          Silicon
        </a>
        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse5" aria-expanded="false">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="dropdown order-lg-3 ms-4">
          <a href="#" class="d-flex nav-link p-0" data-bs-toggle="dropdown">
            <img src="assets/img/avatar/09.jpg" class="rounded-circle" width="48" alt="Avatar">
            <div class="d-none d-sm-block ps-2">
              <div class="fs-xs lh-1 opacity-60">Hello,</div>
              <div class="fs-sm dropdown-toggle">Alexander</div>
            </div>
          </a>
          <ul class="dropdown-menu dropdown-menu-end my-1" style="width: 14rem;">
            <li>
              <a href="#" class="dropdown-item d-flex align-items-center">
                <i class="bx bx-shopping-bag fs-base opacity-60 me-2"></i>
                Orders
                <span class="bg-success rounded-circle mt-n2 ms-1" style="width: 5px; height: 5px;"></span>
                <span class="ms-auto fs-xs text-muted">2</span>
              </a>
            </li>
            <li>
              <a href="#" class="dropdown-item d-flex align-items-center">
                <i class="bx bx-dollar fs-base opacity-60 me-2"></i>
                Sales
                <span class="ms-auto fs-xs text-muted">$735.00</span>
              </a>
            </li>
            <li>
              <a href="#" class="dropdown-item d-flex align-items-center">
                <i class="bx bx-chat fs-base opacity-60 me-2"></i>
                Messages
                <span class="bg-success rounded-circle mt-n2 ms-1" style="width: 5px; height: 5px;"></span>
                <span class="ms-auto fs-xs text-muted">1</span>
              </a>
            </li>
            <li>
              <a href="#" class="dropdown-item d-flex align-items-center">
                <i class="bx bx-group fs-base opacity-60 me-2"></i>
                Followers
                <span class="ms-auto fs-xs text-muted">146</span>
              </a>
            </li>
            <li>
              <a href="#" class="dropdown-item d-flex align-items-center">
                <i class="bx bx-star fs-base opacity-60 me-2"></i>
                Reviews
                <span class="ms-auto fs-xs text-muted">15</span>
              </a>
            </li>
            <li>
              <a class="dropdown-item d-flex align-items-center" href="#">
                <i class="bx bx-heart fs-base opacity-60 me-2"></i>
                Favorites
                <span class="ms-auto fs-xs text-muted">6</span>
              </a>
            </li>
            <li class="dropdown-divider"></li>
            <li>
              <a class="dropdown-item d-flex align-items-center" href="#">
                <i class="bx bx-log-out fs-base opacity-60 me-2"></i>
                Sign out
              </a>
            </li>
          </ul>
        </div>
        <nav id="navbarCollapse5" class="collapse navbar-collapse order-lg-2">
          <hr class="d-lg-none mt-3 mb-2">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a href="#" class="nav-link active">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Services</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Contacts</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

## Color schemes

    <!-- Dark navbar -->
    <header class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        ...
      </div>
    </header>

    <!-- Gray navbar -->
    <header class="navbar navbar-expand-lg navbar-light bg-secondary">
      <div class="container">
        ...
      </div>
    </header>

## Responsive offcanvas menu

    <!-- 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 flex-shrink-0">
          <img src="assets/img/logo.svg" width="47" alt="Silicon">
          Silicon
        </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>
        <div class="offcanvas offcanvas-end" 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>
          <ul class="navbar-nav offcanvas-body pt-3">
            <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>
    </header>

Top