Navigation

Navigation is implemented using the <nav> element as its fundamental building block, but it's actually a combination of several elements working together.

Semanticus CSS adds some opinionated styling to <nav>, in order to reduce boilerplate code for common navigation patterns like horizontal navs, breadcrumbs, and sidebars.

Check out Pagination for more examples of navigation patterns.

Basic Usage

• <nav> is a flex container that uses justify-content: space-between to distribute its children across the horizontal axis;
• All direct children of <nav> will have their margin-block set to 0;
• In case of a single child, it will grow to fill the available space;

<nav>
  <a href="#"><strong>Acme Corp</strong></a>
  
  <p>tag line</p>
  
  <a href="#!" class="secondary">Log out</a>
</nav>

Horizontal Navigation

• <ul> children will become a horizontal flex container also;
• <li> children will become unstyled and inlined;
• <a> children will lose their underline except on :hover.
• <button> and <details> (Dropdowns) children will automatically match the height and padding of links.

<nav>
  <div>
    <img style="width: 30px" src="https://semanticus.design/logo.svg" alt="Brand logo">
    <strong class="fs-6">Acme Corp</strong>
  </div>
  
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#products" aria-current="page">Products</a></li>
    <li><button>Log In</button></li>
  </ul>
</nav>

Breadcrumbs

Breadcrumbs are implemented using a single <ol> element inside a <nav>. This represents the current page's location within a navigational hierarchy.

Each breadcrumb item is represented as an <li> element, and the current page is typically indicated by adding the aria-current="page" attribute either to the <a> or corresponding <li> element.

Accessibility: Don't forget to add aria-label="Breadcrumbs" to the <nav> element for better accessibility.

<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#category">Category</a></li>
    <li aria-current="page"><a href="#page">Page</a></li>
  </ol>
</nav>

Vertical Navigation

• <nav>, <ul> and <ol> elements get stacked vertically when inside an <aside>;
• When <nav> is a direct child of an <aside> it will stretch itself to fill the available height.

<aside style="height: 300px; width: 200px">
  <nav>
    <ul>
      <li>
        <div class="hstack gap-1">
          <img style="width: 30px" src="https://semanticus.design/logo.svg" alt="Brand logo" />
          <strong class="fs-6">Semanticus CSS</strong>
        </div>
      </li>
      <li><hr /></li>
    
      <li><a href="#about">About</a></li>
      <li><a href="#getting-started" aria-current="page">Getting Started</a></li>
      <li><a href="#advanced-usage">Advanced Usage</a></li>
      <li><a href="#uninstall">Uninstall</a></li>
    
      <li class="flex-grow-1"></li>
      <li><button class="ghost">Support</button></li>
    </ul>
  </nav>
</aside>

Search and Dropdown Example

<nav>
  <input type="search" name="search" placeholder="Search" aria-label="Search" />

  <ul>
    <li><a href="#" aria-current="page">Docs</a></li>
    <li>
      <details>
        <summary aria-haspopup="menu">About</summary>
        <ul dir="rtl" role="menu">
          <li><a role="menuitem" href="#services">Services</a></li>
          <li><a role="menuitem" href="#company">Company</a></li>
          <li><a role="menuitem" href="#careers">Careers</a></li>
        </ul>
      </details>
    </li>
    <li><a href="#" role="button" class="contrast">Log In</a></li>
  </ul>
</nav>