Sub-Menu

Render a horizontal sub menu with Sub Menu Item components. The menu will scroll on overflow. If the item respresenting the current page is out of view (due to overflow on page load), the menu will scroll it into view. The position property affects the positioning of the line which marks a selected item. When the menu is placed at the top of a page, the lines appear at the bottom (default). Set the position property to bottom to display the lines at the top.

'position' => 'top', // top | bottom
<x-subMenu>
    <x-subMenuItem href="#" icon="lucide-key-round" label="Passwort" current />
    <x-subMenuItem href="#" icon="tabler-lock-check" label="Authentifizierung (2FA)" />
    <x-subMenuItem href="#" icon="lucide-wallet" label="Custody" />
    <x-subMenuItem href="#" icon="lucide-circle-user" label="Konto" />
</x-subMenu>
<x-subMenu position="bottom">
    <x-subMenuItem href="#" icon="tabler-layout-board-split" label="Maximal" current />
    <x-subMenuItem href="#" icon="tabler-layout-board" label="Kompakt" />
    <x-subMenuItem href="#" icon="tabler-layout-columns" label="Reduziert" />
</x-subMenu>