Ayo.css
Layout
  • Grid
  • Navbar
  • Responsive
  • Scrolling Columns
Elements
  • Buttons
  • Code
  • Forms
  • Icons
  • Media
  • Tables
  • Typography
Components
  • Accordions
  • Avatars
  • Bars
  • Breadcrumbs
  • Cards
  • Chips
  • Empty
  • Menu
  • Modals
  • Nav
  • Notifications
  • Pagination
  • Panels
  • Popovers
  • Progress
  • Steps
  • Tabs
  • Tiles
  • Toasts
  • Tooltips
Utilities
  • Colors
  • Cursors
  • Display
  • Divider
  • Loading
  • Position
  • Shapes
  • Text

Nav

  • Elements
  • Layout
    • Flexbox grid
    • Responsive
    • Navbar
    • Empty states
  • Components
  • Utilities

Add a container element with the nav class. And add child elements with the nav-item class. The nav-item with the active class will be highlighted.

<ul class="nav">
  <li class="nav-item">
    <a href="#">Elements</a>
  </li>
  <li class="nav-item active">
    <a href="#">Layout</a>
    <ul class="nav">
      <li class="nav-item">
        <a href="#">Flexbox grid</a>
      </li>
      <li class="nav-item">
        <a href="#">Responsive</a>
      </li>
      <li class="nav-item">
        <a href="#">Navbar</a>
      </li>
      <li class="nav-item">
        <a href="#">Empty states</a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a href="#">Components</a>
  </li>
  <li class="nav-item">
    <a href="#">Utilities</a>
  </li>
</ul>