User menu

12 · Menu

The user dropdown menu on the right of the top bar. The button shows the initials of the name and, on wide screens, the name; the menu items come from the slot.

acun:user-menu

Basic usage

name is required; it is shown on the button together with the initials (below sm, only the initials). Put the menu items in the slot with acun:dropdown.item; the menu opens aligned to the right edge of the button and closes when an item is clicked.

LIVE EXAMPLE

<acun:user-menu name="Ayşe Yılmaz">
    <acun:dropdown.item href="#">Profile</acun:dropdown.item>
    <acun:dropdown.item href="#">Settings</acun:dropdown.item>
    <acun:dropdown.item>Log Out</acun:dropdown.item>
</acun:user-menu>

Prop	Values
`name`	Name of the user (required)

Initials

The initials are generated from the first two words of the name ("Mehmet Ali Kaya" → MA). If you need a different abbreviation, pass it with initials.

LIVE EXAMPLE

<acun:user-menu name="Mehmet Ali Kaya">
    <acun:dropdown.item href="#">Profile</acun:dropdown.item>
</acun:user-menu>
<acun:user-menu name="Mehmet Ali Kaya" initials="MK">
    <acun:dropdown.item href="#">Profile</acun:dropdown.item>
</acun:user-menu>

Prop	Values
`initials`	Generated from the name when not given

In the layout

Put it in the layout's userMenu slot. Add wire:navigate to page links; for logging out, use a form containing @csrf and an item with type="submit". Other attributes given to the component (e.g. aria-label, class) go to the trigger button.

BLADE

<acun:slot:userMenu>
    <acun:user-menu :name="auth()->user()->name">
        <acun:dropdown.item :href="route('profile.edit')" wire:navigate>Settings</acun:dropdown.item>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <acun:dropdown.item type="submit">Log Out</acun:dropdown.item>
        </form>
    </acun:user-menu>
</acun:slot:userMenu>

API

Props and slots

The values the component accepts.

Prop	Default	Description
`name`	—	Name of the user (required)
`initials`	`null`	Generated from the first two words of the name when not given (Ayşe Yılmaz → AY)

Slots: default (menu items: acun:dropdown.item)