# nav — Examples

## variant — primary

```html
<nav-ui style="width:240px;height:280px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
  <nav-item-ui text="Dashboard" icon="house" value="dashboard" selected></nav-item-ui>
  <nav-item-ui text="Reports" icon="chart-bar" value="reports"></nav-item-ui>
  <nav-group-ui text="Settings" icon="gear">
    <nav-item-ui text="Profile" value="settings/profile"></nav-item-ui>
    <nav-item-ui text="Billing" value="settings/billing"></nav-item-ui>
    <nav-item-ui text="Team" value="settings/team"></nav-item-ui>
  </nav-group-ui>
</nav-ui>
```

## variant — section

```html
<nav-ui variant="section" heading="Documentation" style="width:240px;">
  <nav-item-ui text="Overview" value="docs/overview" selected></nav-item-ui>
  <nav-item-ui text="Quickstart" value="docs/quickstart"></nav-item-ui>
  <nav-item-ui text="API reference" value="docs/api"></nav-item-ui>
  <nav-item-ui text="Examples" value="docs/examples"></nav-item-ui>
</nav-ui>
```

## collapsed

```html
<nav-ui collapsed style="width:64px;height:280px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
  <nav-item-ui text="Dashboard" icon="house" value="dashboard" selected></nav-item-ui>
  <nav-item-ui text="Reports" icon="chart-bar" value="reports"></nav-item-ui>
  <nav-group-ui text="Settings" icon="gear">
    <nav-item-ui text="Profile" value="settings/profile"></nav-item-ui>
    <nav-item-ui text="Billing" value="settings/billing"></nav-item-ui>
  </nav-group-ui>
</nav-ui>
```
