sheengemologic ui
All components

NavList

A named navigation landmark containing a native list of destination links.@gemologic/sheen · navigation

Playground

This example has no scalar controls. Its validated source remains interactive below.
<NavList label="Settings"><NavItem href="/settings/profile" label="Profile" current /><NavItem href="/settings/security" label="Security" /></NavList>

Variant matrix

Settings navigation

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/NavList.tsx
Tokens
  • --sheen-space-block-xs
  • --sheen-space-inline-sm

Accessibility

Role: navigation, listKeyboard: Tab, Shift+Tab, Enter

Do

  • Use NavItem children and distinguish multiple navigation landmarks.

Do not

  • Do not apply menu or tablist semantics to ordinary URL navigation.

Generated props

NameTypeDefaultDescription
label *string—Required accessible landmark name, distinguishing separate navigation lists.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.