Horizontal menu
The top menu of the horizontal layout: single links and groups with a dropdown panel. The panel opens on mouse hover or when keyboard focus moves into it; no JavaScript is needed.
Basic usage
acun:nav.horizontal-item is a single link and acun:nav.horizontal-group is a group with a dropdown panel. For the links in the panel, use acun:nav.sub-item and acun:nav.coming-soon with compact. In the layout, the menu fills the height of the top bar; in the example this height is set with h-12.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Home" />
<acun:nav.horizontal-group title="Customers">
<acun:nav.sub-item compact href="#" title="Customer List" />
<acun:nav.sub-item compact href="#" title="Customer Groups" />
</acun:nav.horizontal-group>
<acun:nav.horizontal-group title="Imports">
<acun:nav.sub-item compact href="#" title="Product Import from Excel" />
<acun:nav.coming-soon compact title="Users from Excel" />
</acun:nav.horizontal-group>
</nav>| Prop | Values |
|---|---|
horizontal-item: href, title | Link URL and text (required) |
horizontal-group: title | Group name (required) |
sub-item: compact | true (inside the panel) |
Active page
Pass active to the active link or to the group that contains the active page; a thin line in the accent color appears below it. In the panel, the active sub-item in the compact look is marked with a gray background.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Home" />
<acun:nav.horizontal-group title="Reports" active>
<acun:nav.sub-item compact href="#" title="Sales Report" active />
<acun:nav.sub-item compact href="#" title="Stock Report" />
</acun:nav.horizontal-group>
<acun:nav.horizontal-item href="#" title="Orders" />
</nav>| Prop | Values |
|---|---|
active | true | false |
Icons
Both items accept the icon slot; the icon is placed to the left of the text. Since space is tight in the top menu, keep icons small with size="4".
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Home" active>
<acun:slot:icon><acun:icon name="home" size="4" /></acun:slot:icon>
</acun:nav.horizontal-item>
<acun:nav.horizontal-group title="Customers">
<acun:slot:icon><acun:icon name="users" size="4" /></acun:slot:icon>
<acun:nav.sub-item compact href="#" title="Customer List" />
</acun:nav.horizontal-group>
</nav>Badges
badge shows a number or a short label after the name of the link or group; it looks the same as the badges in the vertical menu. You can also pass badge to the sub-items in the panel. acun:menu passes the badge value from the JSON to horizontal items as well.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Support tickets" badge="12" />
<acun:nav.horizontal-group title="Imports" badge="New">
<acun:nav.sub-item compact href="#" title="Product Import from Excel" badge="3" />
<acun:nav.sub-item compact href="#" title="Import history" />
</acun:nav.horizontal-group>
</nav>| Prop | Values |
|---|---|
badge | Number or short text; not shown when null |
External link
A top menu link or panel sub-item given external opens in a new tab (same as target="_blank"), does not use wire:navigate and shows a small arrow icon after its name. Screen readers also announce that the link opens in a new tab.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Home" />
<acun:nav.horizontal-item href="https://laravel.com/docs" title="Docs" external />
<acun:nav.horizontal-group title="Help">
<acun:nav.sub-item compact href="#" title="User guide" external />
</acun:nav.horizontal-group>
</nav>| Prop | Values |
|---|---|
external | true | false |
Groups on the right edge
By default the panel opens from the left edge of the group. For groups at the right end of the menu (e.g. Settings), pass align="right" so the panel does not overflow the screen.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Home" />
<div class="flex-1"></div>
<acun:nav.horizontal-group title="Settings" align="right">
<acun:nav.sub-item compact href="#" title="Users" />
<acun:nav.sub-item compact href="#" title="Permissions" />
</acun:nav.horizontal-group>
</nav>| Prop | Values |
|---|---|
align | left | right |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
horizontal-item: href, title | — | Link URL and text (required) |
horizontal-item: active | false | Accent line below it and aria-current="page" |
horizontal-item: target | null | '_blank' opens it in a new tab (wire:navigate is not used); adds an arrow icon and a screen reader note |
horizontal-item: external | false | Same as target='_blank': new tab, arrow icon and screen reader note |
horizontal-item: badge | null | Number or short label after the name |
horizontal-group: title | — | Group name (required) |
horizontal-group: active | false | Group that contains the active page; accent line |
horizontal-group: align | left | left · right (alignment of the panel) |
horizontal-group: badge | null | Number or short label after the name |
sub-item: badge | null | Badge of the sub-item in the panel |
sub-item: compact | false | Boxed look inside the panel; pass true in the horizontal menu |
coming-soon: compact | false | Boxed look inside the panel |
(attributes) | — | class, data-*, wire:key … are added to the link itself on horizontal-item (class is merged) and to the wrapping div on horizontal-group |