# nav-group — Examples

## text + icon

```html
<nav-ui style="width:240px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
  <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>
```

## badge

```html
<nav-ui style="width:240px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
  <nav-group-ui text="Notifications" icon="bell" badge="3" open>
    <nav-item-ui text="Mentions" value="notif/mentions"></nav-item-ui>
    <nav-item-ui text="Follows" value="notif/follows"></nav-item-ui>
  </nav-group-ui>
</nav-ui>
```

## variant — section

```html
<nav-ui variant="section" style="width:240px;">
  <nav-group-ui text="Reference" variant="section">
    <nav-item-ui text="Components" value="ref/components"></nav-item-ui>
    <nav-item-ui text="Tokens" value="ref/tokens"></nav-item-ui>
    <nav-item-ui text="Patterns" value="ref/patterns"></nav-item-ui>
  </nav-group-ui>
</nav-ui>
```
