---
title: Nav List
description: "The vertical category buttons from the All Settings window."
---

<Component path="nav-list/playground" />

## Installation

```bash
npx shadcn@latest add https://osrsui.com/r/nav-list.json
```

## Usage

```tsx
<Tabs orientation="vertical" defaultValue="audio">
  <NavList>
    <NavItem value="audio">Audio</NavItem>
  </NavList>
  <TabsContent value="audio">…</TabsContent>
</Tabs>
```

## Links

For a site's or app's navigation, use `NavLink` instead of `NavItem`: real links in a `<nav>`, styled as the list. Set `current` on the current page's link. It opens into the page beside the column: its frame is unfilled and a strip of the page's surface covers the column's divider. Set `--osrs-nav-surface` to the page's background if it isn't the plain stone.

```tsx
<nav aria-label="Docs" className="osrs-nav-list">
  <NavLink href="/components/button" current>Button</NavLink>
  <NavLink href="/components/tabs">Tabs</NavLink>
</nav>
```