Navigation

Summary

The nav family: vertical and horizontal navgroups (page-panel navigation), section headings, breadcrumbs, and pagination. The application header uses the same .neura-nav lists in its slots.

Examples

Horizontal navgroup

Primary group at the inline-start, secondary at the inline-end. Nav items commonly carry badges; items can also be dropdown2 triggers - a labelled menu in the primary group, an icon-only settings menu in the secondary group:

Vertical navigation

Usually placed inside a page-panel-nav cell, but expands to fit any container. Multiple ul.neura-nav lists draw group dividers; headings label sections:

Section headings

A neura-nav-heading before each list labels the group (useful when one panel holds several logical sections):

Breadcrumbs

Pagination

The current page uses neura-nav-selected and must not be a link; long ranges truncate with neura-nav-truncation:

First
Prev
1
2
3
…
998
999
Next
Last

HTML

Horizontal navgroup

<nav class="neura-navgroup neura-navgroup-horizontal">
  <div class="neura-navgroup-inner">
    <div class="neura-navgroup-primary">
      <ul class="neura-nav">
        <li><a href="#">Overview</a></li>
        <li class="neura-nav-selected"><a href="#" aria-current="page">Activity</a></li>
        <li><a href="#">Pull requests <span class="neura-badge">123</span></a></li>
        <li>  <!-- nav item opening a dropdown2 menu; the caret is drawn by CSS -->
          <a href="#" class="neura-dropdown2-trigger" aria-controls="nav-dd-menu">Dropdown menu</a>
          <div id="nav-dd-menu" class="neura-dropdown2 neura-style-default" aria-hidden="true">
            <ul>
              <li><a href="#">Menu item</a></li>
              <li><a href="#">Menu item</a></li>
              <li><a href="#">Menu item</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="neura-navgroup-secondary">
      <ul class="neura-nav">
        <li>  <!-- icon-only settings menu -->
          <a href="#" class="neura-dropdown2-trigger" aria-controls="nav-dd-settings"
             aria-label="Settings">
            <span class="neura-icon neura-icon-settings"></span>
          </a>
          <div id="nav-dd-settings" class="neura-dropdown2 neura-style-default" aria-hidden="true">
            <ul>
              <li><a href="#">Edit project</a></li>
              <li><a href="#">Permissions</a></li>
              <li><a href="#">Notifications</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Vertical navigation

<nav class="neura-navgroup neura-navgroup-vertical">
  <div class="neura-navgroup-inner">
    <ul class="neura-nav">
      <li class="neura-nav-selected"><a href="#" aria-current="page">Selected nav item</a></li>
      <li><a href="#">Nav item</a></li>
      <li><a href="#">Nav item <span class="neura-badge">7</span></a></li>
    </ul>
    <ul class="neura-nav">  <!-- second list = divided group -->
      <li><a href="#">Nav item</a></li>
      <li><a href="#">Nav item</a></li>
    </ul>
    <div class="neura-nav-heading"><strong>Heading</strong></div>
    <ul class="neura-nav">
      <li><a href="#">Nav item</a></li>
      <li><a href="#">Nav item</a></li>
    </ul>
  </div>
</nav>

Section headings

<nav class="neura-navgroup neura-navgroup-vertical">
  <div class="neura-navgroup-inner">
    <div class="neura-nav-heading"><strong>Project</strong></div>
    <ul class="neura-nav">
      <li class="neura-nav-selected"><a href="#" aria-current="page">Overview</a></li>
      <li><a href="#">Activity</a></li>
      <li><a href="#">Reports</a></li>
    </ul>
    <div class="neura-nav-heading"><strong>Administration</strong></div>
    <ul class="neura-nav">
      <li><a href="#">Users</a></li>
      <li><a href="#">Permissions</a></li>
      <li><a href="#">System</a></li>
    </ul>
  </div>
</nav>

Breadcrumbs

<ol class="neura-nav neura-nav-breadcrumbs">
  <li><a href="#">Projects</a></li>
  <li><a href="#">Infrastructure</a></li>
  <li class="neura-nav-selected" aria-current="page">Gateway</li>
</ol>

Pagination

<ol class="neura-nav neura-nav-pagination">
  <li class="neura-nav-first"><a href="#">First</a></li>
  <li class="neura-nav-previous"><a href="#">Prev</a></li>
  <li><a href="#">1</a></li>
  <li class="neura-nav-selected" aria-current="page">2</li>
  <li><a href="#">3</a></li>
  <li class="neura-nav-truncation">&hellip;</li>
  <li><a href="#">998</a></li>
  <li><a href="#">999</a></li>
  <li class="neura-nav-next"><a href="#">Next</a></li>
  <li class="neura-nav-last"><a href="#">Last</a></li>
</ol>

CSS classes

Class	Effect
`.neura-navgroup-horizontal` / `-vertical`	The nav container, in page-top or side form. Vertical navgroups usually live in a page-panel nav cell.
`.neura-navgroup-inner`	Inner wrapper of a horizontal navgroup.
`.neura-navgroup-primary` / `-secondary`	Inline-start / inline-end slots of a horizontal navgroup.
`.neura-nav`	The item list (`<ul>`). Consecutive lists in a vertical navgroup draw group dividers.
`.neura-nav-heading`	Section heading labelling the list that follows it.
`.neura-nav-selected`	Current item (on the `<li>`); pair with `aria-current="page"`.
`.neura-nav-breadcrumbs`	Breadcrumb trail (on an `<ol>`); items draw "/" separators.
`.neura-nav-pagination`	Pagination list; the selected page uses `.neura-nav-selected`.
`.neura-nav-truncation`	The "…" item in a truncated pagination or breadcrumb trail.

AUI compatibility

Full parity: aui-nav* and aui-navgroup* alias onto the Neura rules. CSS-only.