Nav — Caustica Design Docs

Preview

Live

<nav class="ui-nav" aria-label="Primary">
  <ul class="ui-nav__list">
    <li class="ui-nav__item">
      <a class="ui-nav__link is-active" href="../index.html" aria-current="page">Dashboard</a>
    </li>
    <li class="ui-nav__item">
      <a class="ui-nav__link" href="/applications">Applications</a>
    </li>
    <li class="ui-nav__item">
      <a class="ui-nav__link" href="/settings">Settings</a>
    </li>
  </ul>
</nav>

import { Nav, NavItem, NavLink } from 'caustica-design/core'

<Nav aria-label="Primary">
  <NavItem><NavLink href="../index.html" active>Dashboard</NavLink></NavItem>
  <NavItem><NavLink href="/applications">Applications</NavLink></NavItem>
  <NavItem><NavLink href="/settings">Settings</NavLink></NavItem>
</Nav>

Variants

Horizontal

Default orientation — flex row of links.

Vertical

.ui-nav--vertical / React orientation="vertical".

Active link

.is-active, aria-current="page" (or "location" for in-page sections), and data-active (React active sets page).

API

HTML classes

Class	Description
`.ui-nav`	Root navigation landmark.
`.ui-nav--vertical`	Stacked (column) link list.
`.ui-nav__list`	Unordered list of items.
`.ui-nav__item`	List item wrapper.
`.ui-nav__link`	Anchor styled as a nav link.
`.is-active`	Current visual state on the link. Also applied when `aria-current` is `page` or `location`.

React props

From src/core/Nav.tsx — compound Nav / NavItem / NavLink.

Prop	Type	Default	Description
`aria-label`	`string`	—	Required accessible name for the nav landmark.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction; vertical adds `.ui-nav--vertical`.
`NavLink active`	`boolean`	`false`	Sets `aria-current="page"`, `data-active`, and `.is-active`. Hosts may set `aria-current="location"` for in-page sections — CSS and the active track treat it like `page`.
`className`	`string`	—	Merged via `cx` onto the root of each part.