PayPalGitHub
Spectre.css CSS Framework

SPECTRE

DOCS
  • Installation
  • Custom version
  • Browser support
  • What's new
  • Typography
  • Tables
  • Buttons
  • Forms
  • Icons.css
  • Labels
  • Code
  • Media
  • Flexbox grid
  • Responsive
  • Hero
  • Navbar
  • Accordions
  • Avatars
  • Badges
  • Bars
  • Breadcrumbs
  • Cards
  • Chips
  • Empty states
  • Menu
  • Modals
  • Nav
  • Pagination
  • Panels
  • Popovers
  • Steps
  • Tabs
  • Tiles
  • Toasts
  • Tooltips
  • Colors
  • Cursors
  • Display
  • Divider
  • Loading
  • Position
  • Shapes
  • Text
  • 360-Degree Viewer
  • Autocomplete
  • Calendars
  • Carousels
  • Comparison sliders
  • Filters
  • Meters
  • Off-canvas
  • Parallax
  • Progress
  • Sliders
  • Timelines

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>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.