Skip to component content

Navigation

Create compact, semantic navigation surfaces with Bootstrap-native nav patterns for app shells.

Usage

Use .nav and .nav-link for links that move between pages, sections, or persistent app routes. Wrap the links in a labelled nav region, use one Bootstrap nav style for the whole set, and keep labels short enough to scan in sidebars, tabs, or compact header rows.

Mark the current destination with the active state and the appropriate current-page signal, and keep disabled items out of required paths. Icons, badges, and counters should clarify the destination or status; they should not replace the visible link label.

Choose the pattern from the information architecture: horizontal pills for peer routes, vertical lists for sidebars, and underline nav for lightweight filters. If clicking a control changes a panel without navigating to a route, use Tabs rather than Navigation.

Pills

Use a compact pill row for workspace routes where current context should be clearly emphasized.

Navigation 
<nav aria-label="Workspace sections">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#" aria-current="page"> <span> Dashboard </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"> <span> Tasks </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"> <span> Apps </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" aria-disabled="true" tabindex="-1"> <span> Settings </span> </a>
    </li>
  </ul>
</nav>

Use one-level, icon-led sidebar items for predictable routes; nested flyouts are handled in a dedicated sidebar pattern.

Navigation

Steps

Connect 2rem icon frames in a vertical route menu. Completed steps use the theme's primary colors; the current page keeps its independent pill highlight. Supply an icon for each step and keep completion independent of availability.

Navigation 
<nav aria-label="Application steps">
  <ul class="nav nav-pills nav-steps flex-column">
    <li class="nav-item" data-nav-completed="true">
      <a class="nav-link" href="#"> <span class="nav-link-icon" aria-hidden="true"><i class="lucide lucide-folder-open" data-icon="inline-start" aria-hidden="true"></i></span> <span> Details <span class="nav-link-description d-block small">Details saved</span><span class="visually-hidden">Completed</span> </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#" aria-current="page"> <span class="nav-link-icon" aria-hidden="true"><i class="lucide lucide-user" data-icon="inline-start" aria-hidden="true"></i></span> <span> Members <span class="nav-link-description d-block small">Choose your team</span> </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"> <span class="nav-link-icon" aria-hidden="true"><i class="lucide lucide-calendar" data-icon="inline-start" aria-hidden="true"></i></span> <span> Schedule <span class="nav-link-description d-block small">Choose a date</span> </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" aria-disabled="true" tabindex="-1"> <span class="nav-link-icon" aria-hidden="true"><i class="lucide lucide-send" data-icon="inline-start" aria-hidden="true"></i></span> <span> Submit <span class="nav-link-description d-block small">Available after review</span> </span> </a>
    </li>
  </ul>
</nav>

Underline

Use underlines for lightweight filters in narrow views where emphasis should stay subtle.

Navigation 
<nav aria-label="Project filters">
  <ul class="nav nav-underline">
    <li class="nav-item">
      <a class="nav-link active" href="#" aria-current="page"> <span> All </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"> <span> Open </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"> <span> Archived </span> </a>
    </li>
  </ul>
</nav>

Base nav

Use the base style when surrounding layout defines the visual weight and only the active link needs state.

Navigation 
<nav aria-label="Plain navigation">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="#" aria-current="page"> <span> Overview </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"> <span> Reports </span> </a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" aria-disabled="true" tabindex="-1"> <span> Disabled </span> </a>
    </li>
  </ul>
</nav>

RTL

Validate the same sidebar navigation pattern across Arabic and Hebrew RTL examples, with English as the LTR comparison.

Status
Accepted
Runtime
native HTML/CSS
Markup
Bootstrap/native HTML
Reference

For dynamic tabs, pills, and JavaScript tab panels, continue with the Bootstrap Navs and tabs documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.