Menu items
The parts of the vertical menu: section heading, link, group with a submenu, third-level subgroup and the "Coming soon" item. Groups work like an accordion; since the group of the active page is rendered open on the server, the menu looks right even before Alpine loads.
Headings and links
acun:nav.heading divides the menu into sections; pass first on the first heading to reduce its top spacing. acun:nav.item is a link without a submenu; its icon comes from the icon slot. Pass active on the active page: the item is highlighted and gets aria-current="page". In the collapsed menu, headings are hidden and item names appear as tooltips. Extra attributes such as class, data-* or wire:key are passed to the item; class is merged with the component's own classes.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.heading first>General</acun:nav.heading>
<acun:nav.item href="#" title="Home" active>
<acun:slot:icon><acun:icon name="home" /></acun:slot:icon>
</acun:nav.item>
<acun:nav.item href="#" title="Customers">
<acun:slot:icon><acun:icon name="users" /></acun:slot:icon>
</acun:nav.item>
<acun:nav.heading>Reports</acun:nav.heading>
<acun:nav.item href="#" title="Sales report">
<acun:slot:icon><acun:icon name="chart-bar" /></acun:slot:icon>
</acun:nav.item>
</nav>| Prop | Values |
|---|---|
heading: first | true | false |
item: href, title | Link URL and text (required) |
item: active | true | false |
Groups
acun:nav.group lists its sub-links (acun:nav.sub-item) with a thin guide line on the left. Only one group stays open at a time: opening a group closes the others. Pass active to the group that contains the active page; that group is open when the page loads.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.group title="Customers" active>
<acun:slot:icon><acun:icon name="users" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Customer List" active />
<acun:nav.sub-item href="#" title="Customer Groups" />
</acun:nav.group>
<acun:nav.group title="Reports">
<acun:slot:icon><acun:icon name="document-text" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Sales Report" />
<acun:nav.sub-item href="#" title="Stock Report" />
</acun:nav.group>
</nav>| Prop | Values |
|---|---|
group: title | Group name (required) |
group: active | true | false |
sub-item: href, title, active | Sub-link; highlighted on the guide line when active |
Third level
If a group needs a further breakdown, use acun:nav.sub-group. It is listed one step further in with its own guide line and opens and closes on click; if the active page is inside it, active makes it open.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.group title="Definitions" active>
<acun:slot:icon><acun:icon name="cog-6-tooth" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Carriers" />
<acun:nav.sub-group title="Address" active>
<acun:nav.sub-item href="#" title="Districts" active />
<acun:nav.sub-item href="#" title="Neighborhoods" />
</acun:nav.sub-group>
</acun:nav.group>
</nav>| Prop | Values |
|---|---|
sub-group: title | Subgroup name (required) |
sub-group: active | true | false |
Badges
badge adds a number or a short label to the right of the item; for things like the number of pending tasks or a "New" notice. It works on every level of the menu: acun:nav.item, acun:nav.group, acun:nav.sub-group and acun:nav.sub-item. If you build the menu from JSON, acun:menu passes the item's badge value to the same component.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.item href="#" title="Support tickets" badge="12">
<acun:slot:icon><acun:icon name="inbox" /></acun:slot:icon>
</acun:nav.item>
<acun:nav.group title="Imports" badge="New" active>
<acun:slot:icon><acun:icon name="arrow-up-tray" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Product Import from Excel" badge="3" />
<acun:nav.sub-group title="Pending" badge="5" active>
<acun:nav.sub-item href="#" title="Awaiting approval" badge="2" />
</acun:nav.sub-group>
</acun:nav.group>
</nav>| Prop | Values |
|---|---|
badge | Number or short text; not shown when null |
Coming soon
acun:nav.coming-soon shows a page that is not ready yet as non-clickable, with a "Coming soon" label on its right; change the label with label.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.group title="Training" active>
<acun:slot:icon><acun:icon name="academic-cap" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Frequently asked questions" />
<acun:nav.coming-soon title="Training videos" />
<acun:nav.coming-soon title="Live support" label="March" />
</acun:nav.group>
</nav>| Prop | Values |
|---|---|
coming-soon: label | Label on the right; defaults to "Coming soon" |
External link
Pass external on links that leave the application; it does the same as target="_blank". The link opens in a new tab and does not use wire:navigate, a small arrow icon is added after the name, and screen readers are told "(opens in a new tab)". It works on acun:nav.item, acun:nav.sub-item and acun:nav.horizontal-item; items given target="_blank" get the same icon and note.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.item href="https://laravel.com/docs" title="Laravel docs" external>
<acun:slot:icon><acun:icon name="book-open" /></acun:slot:icon>
</acun:nav.item>
<acun:nav.group title="Help" active>
<acun:slot:icon><acun:icon name="question-mark-circle" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="User guide" external />
</acun:nav.group>
</nav>| Prop | Values |
|---|---|
external | true | false |
target | _blank (same as external) |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
nav.heading: first | false | Reduces the top spacing of the first heading; the heading text comes from the slot |
nav.item: href, title | — | Link URL and text (required) |
nav.item: active | false | Active page; highlight and aria-current="page" |
nav.item: badge | null | Number or short label on the right |
nav.item: target | null | '_blank' opens it in a new tab (wire:navigate is not used); adds an arrow icon and a screen reader note |
nav.item: external | false | Same as target='_blank': new tab, arrow icon and screen reader note |
nav.group: title | — | Group name (required) |
nav.group: active | false | The group is rendered open and highlighted on the server |
nav.group: badge | null | Number or short label on the right |
nav.sub-group: title | — | Name of the third-level, collapsible subgroup (required) |
nav.sub-group: active | false | The subgroup is rendered open and highlighted on the server |
nav.sub-group: badge | null | Number or short label on the right |
nav.sub-item: href, title | — | URL and text of the sub-link (required) |
nav.sub-item: active, badge, target, external | false · null · null · false | Same as nav.item |
nav.sub-item: compact | false | Boxed look for the horizontal menu panel |
nav.coming-soon: title | — | Item name (required) |
nav.coming-soon: label, compact | null · false | Label text ("Coming soon"); boxed look for the horizontal menu panel |
(attributes) | — | class, data-*, wire:key, wire:click … are added to the element itself on item, sub-item, coming-soon and heading (class is merged), and to the wrapping div on group and sub-group |