Navigation

Overview

.nav-item is the shared link style for header bars and vertical in-page lists. Wrap horizontal groups in .nav__list; stack sections with .inpage-nav. The .header-nav pattern adds logo, main links, and an optional actions slot (buttons).

Prerequisites

• PimentCSS installed, Installation.
• Icons, optional nav-item__icon via ph() (Phosphor in this doc).
• Buttons, header actions use Buttons (.btn--transparent, .btn--primary).

Nav item states

Each item is an <a href="…">. Doc-only .nav-item--hover previews hover color; live pages use :hover and :focus-visible. Selected uses aria-current plus .nav-item--selected when you need the spec modifier.

Structure

Horizontal header links belong in <ul class="nav__list"> inside a labeled <nav>. Vertical section links use .inpage-nav without a list (anchors only).

<nav aria-label="Main navigation">
  <ul class="nav__list">
    <li><a href="/docs" class="nav-item">Home</a></li>
    <li><a href="/docs/colors" class="nav-item nav-item--selected" aria-current="page">Colors</a></li>
  </ul>
</nav>

In-page navigation

Simple vertical nav for jumping between sections on the same page. For multi-level side nav with rails, see In-page anchors.

Header navigation

Desktop uses a three-column grid (1fr auto 1fr): logo at the start, links centered, optional actions at the end. Below 48rem viewport width, links and buttons move into a drawer opened with .header-nav__toggle. Use .header-nav--compact only for doc previews or embedded narrow frames.

Logo + 3 links

Logo + 3 links + button

Logo + 3 links + search + button

Logo + burger (drawer)

Preview uses .header-nav--compact to show the mobile drawer. Open the menu icon; the panel stacks above the demo with a raised z-index.

<header class="header-nav">
  <a href="/docs" class="header-nav__logo" aria-label="Home">…</a>
  <div class="header-nav__panel" id="app-header-nav">
    <nav class="header-nav__nav" aria-label="Main navigation">
      <ul class="nav__list">
        <li><a href="#about" class="nav-item">About</a></li>
        <li><a href="#service" class="nav-item" aria-current="page">Service</a></li>
        <li><a href="#portfolio" class="nav-item">Portfolio</a></li>
      </ul>
    </nav>
    <div class="header-nav__actions"><button type="button" class="btn btn--primary">Sign up</button></div>
  </div>
</header>

Class reference

Customize (Sass)

1. 01

   Navigation spacing

   Override item padding, list gap, and header spacing before importing components.
   variables

   @use "pimentcss-design-system" with (
     $nav-item-padding: 0.5rem,
     $nav-item-gap: 0.75rem,
     $nav-list-gap: 0.5rem,
     $header-nav-gap: 2rem,
     $header-nav-actions-gap: 0.75rem
   );

2. 02

   Rebuild CSS

   Run after editing _navigation.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps