Navigation

Nav list

Vertical navigation for docs and settings, in the jsonresume.org sidebar style.

import { NavList, NavListItem } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Docs navigation

nav-list/docs.tsx

import { NavList, NavListGroup, NavListItem } from '@jsonresume/ui';
import * as styles from './docs.css';

export default function NavListDocs() {
  return (
    <NavList label="Guide" className={styles.root}>
      <NavListGroup label="Start">
        <NavListItem href="#getting-started" active>
          Getting started
        </NavListItem>
        <NavListItem href="#schema">Schema</NavListItem>
      </NavListGroup>
      <NavListGroup label="Guides">
        <NavListItem href="#themes">Themes</NavListItem>
        <NavListItem href="#hosting">Hosting</NavListItem>
      </NavListGroup>
    </NavList>
  );
}

nav-list/docs.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: '15rem' });

Accessibility

A named <nav>; active sets aria-current="page".

Props

Also accepts the attributes of the element NavList renders.
Prop	Type	Default	Description
label required	string	–

Also accepts the attributes of the element NavListItem renders.
Prop	Type	Default	Description
active	boolean	false
asChild	boolean	false