Nav

Nav is a flexible navigation list component used to build horizontal menus, vertical sidebars, justified toolbars, and segmented pill controls. In FrontAlign, Nav is entirely CSS-driven — no JavaScript is required for any layout or styling variant.

Unlike generic navigation patterns, Nav provides a unified component model where the same base structure adapts to every layout mode through modifier classes. For animated tab switching with panel content, see the Tabview component.

Quick reference

Feature	Attribute / Class	Purpose
Base nav	`.nav`	Horizontal flex nav with wrapping and item gap.
Nav item	`.nav-item`	Individual list item inside the nav.
Nav link	`.nav-link`	Anchor element inside a nav item.
Vertical layout	`.is-vertical`	Stacks items in a column. Ideal for sidebars.
Justified layout	`.is-justified`	Each item stretches equally to fill the full width.
Expand layout	`.expand`	Horizontal nav that never wraps.
Pill control	`.is-pill`	Segmented filter or state switching control.
Disabled item	`.is-disabled`	Dims the item and disables pointer interaction.
Active item	`.is-active`	Marks the currently selected nav item.

Getting started

The base Nav structure is a <ul> with the .nav class. Each item is a <li class="nav-item"> and each link is an <a class="nav-link">.

<ul class="nav">
  <li class="nav-item">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">About</a>
  </li>
  <li class="nav-item is-disabled">
    <a href="#" class="nav-link">Contact</a>
  </li>
</ul>

Layout modifiers

Class	Description
`(none)`	Horizontal nav with `0.25rem` gap between items and flex-wrap enabled.
`is-vertical`	Stacks items in a column with `0.125rem` gap. Dropdowns become static and transparent.
`is-justified`	Each item grows equally to fill the full container width.
`expand`	Horizontal nav that never wraps (`flex-wrap: nowrap`).
`is-pill`	Segmented pill control for filters or state switching.

Vertical

The is-vertical modifier changes the navigation flow to a column. This is ideal for sidebars, navigation drawers, or nested menu structures. Any dropdown menus within the list become static and transparent — nested links remain visible without hover interactions.

<ul class="nav is-vertical">
  <li class="nav-item">
    <a href="#" class="nav-link">Dashboard</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Users</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Settings</a>
  </li>
</ul>

Justified

The is-justified modifier forces every .nav-item to expand and occupy an equal portion of the parent container width. Perfect for top navigation bars or segmented controls.

<ul class="nav is-justified">
  <li class="nav-item">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">About</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Contact</a>
  </li>
</ul>

Disabled items

Add is-disabled to any .nav-item to make it visually dimmed (opacity: 0.5) and non-interactive (pointer-events: none). This applies to both the item and its inner link.

<ul class="nav">
  <li class="nav-item">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-item is-disabled">
    <a href="#" class="nav-link">Unavailable</a>
  </li>
</ul>

Pill

The pill nav is used for filters or state switching — it does not open panels, it simply reflects an active state. It renders as an inline-flex container with a --surface background, so it sizes to its content rather than stretching to fill the parent.

<ul class="nav is-pill">
  <li class="nav-item is-active">
    <a href="#" class="nav-link">All</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Archived</a>
  </li>
</ul>

CSS variable theming

Nav uses a focused set of CSS custom properties. Override them in :root or inline on a .nav element.

Variable	Used In	Description
`--nav-text`	All variants	Text color for nav links and active state.
`--surface`	Pill	Background of the pill container; also referenced by disabled and neutral states.

:root {
  --nav-text: #1a1a2e;
  --surface: #f0f0f5;
}

Customizing nav color

The colour of the nav link is controlled by the --link CSS custom property. When you set it on :root, it will affect all links in the document. You can set it to any utility colour token, raw hex value, or OKLCH value — either globally on the :root selector or restricted inline to a single .nav element.

Alternatively, you can use FrontAligin's powerful colour system. For a full list of available colour tokens, see Color utilities...

/* Global override */
:root {
  --link: var(--slate-400);
}
 
/* Scoped to one nav */
.nav-custom-color .nav-link {
  --link:var(--slate-800);
}

For dark mode compatibility, .body-text class is the safest choice for nav-link. It automatically adapts between light and dark themes, ensuring nav links remain readable without any extra overrides.

Accessibility

FrontAlign Nav follows standard navigation accessibility patterns.

Use semantic <ul> and <li> elements as the base structure.
Provide meaningful link labels for screen readers.
Use is-disabled for non-interactive items rather than removing them from the DOM.
Ensure all nav links are reachable via keyboard navigation.