Navlist
Navigation list component for creating organized menu items with icons, badges, and groups
Basic Usage
The most basic navlist with simple items:
<neura::navlist>
<neura::navlist.item label="Home" href="#" />
<neura::navlist.item label="About" href="#" />
<neura::navlist.item label="Contact" href="#" />
</neura::navlist>With Icons
Add icons to navigation items:
<neura::navlist>
<neura::navlist.item label="Home" icon="home" href="#" />
<neura::navlist.item label="Settings" icon="cog-6-tooth" href="#" />
<neura::navlist.item label="Profile" icon="user-circle" href="#" />
</neura::navlist>With Badges
Add badges to display counters or notifications:
<neura::navlist>
<neura::navlist.item label="Messages" icon="envelope" badge="5" href="#" />
<neura::navlist.item label="Notifications" icon="bell" badge="12" href="#" />
</neura::navlist>Active State
The navlist automatically detects the active item based on the URL. You can also set it manually:
<neura::navlist>
<neura::navlist.item label="Settings" icon="cog-6-tooth" href="#" :active="true" />
</neura::navlist>Groups
Organize items into groups with labels:
<neura::navlist>
<neura::navlist.item label="Dashboard" icon="home" href="#" />
<neura::navlist.group label="Settings">
<neura::navlist.item label="General" icon="cog-6-tooth" href="#" />
<neura::navlist.item label="Security" icon="lock-closed" href="#" />
</neura::navlist.group>
</neura::navlist>Collapsible Groups
Créez des groupes pliables avec collapsable="true":
<neura::navlist.group label="Settings" :collapsable="true">
<neura::navlist.item label="General" icon="cog-6-tooth" href="#" />
<neura::navlist.item label="Security" icon="lock-closed" href="#" />
</neura::navlist.group>Group Variants
The navlist group supports two variants: default and compact:
Default Variant
Compact Variant
<neura::navlist.group label="Settings" variant="default">...</neura::navlist.group>
<neura::navlist.group label="Settings" variant="compact">...</neura::navlist.group>Complete Navigation Example
Complete navigation example with groups and items:
Best Practices
✓ Do
- Use icons to improve visual recognition
- Organize items into logical groups for clear navigation
- Use badges for counters and important notifications
- Let the navlist automatically detect the active item based on the URL
✗ Don't
- Ne pas créer trop de niveaux de groupes imbriqués
- Ne pas utiliser trop de badges - gardez-les pour les informations importantes
- Ne pas créer des navlists trop longues - utilisez la pagination ou des sous-menus
Properties
Navlist Item Properties
| Property | Type | Default | Description |
|---|---|---|---|
| label | string|null | null | Navigation link text |
| icon | string|null | null | Icon name to display before the label |
| badge | string|int|null | null | Badge to display to the right of the label (counter, notification, etc.) |
| href | string | '#' | Link destination URL |
| active | bool|null | null | Active state (automatically detected if null based on URL) |
Navlist Group Properties
| Property | Type | Default | Description |
|---|---|---|---|
| label | string|bool | false | Navigation group label |
| collapsable | bool | false | Allow collapsing/expanding the group |
| variant | string | 'default' | Display variant. Values: 'default', 'compact' |