notification-menu

A bell with an unread count, opening recent notifications. Works without JavaScript.

Example

Laravel

<x-admin::toolbar>
    <x-admin::notification-menu id="g-notify" view-all="#" :items="[
        ['title' => 'Sheet export failed', 'description' => 'Quota exceeded. Retrying in 15 minutes.', 'time' => '3 hours ago', 'href' => '#'],
        ['title' => 'Rebuild finished: Early entry', 'time' => 'Yesterday', 'href' => '#', 'unread' => false],
    ]" />
    <x-admin::notification-menu :count="120" />
</x-admin::toolbar>

Props

PropRequiredDefaultOptions
items[]
countnull
view-allnull
max99

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { NotificationMenu } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-toolbar" role="toolbar"><details class="adm-dropdown adm-notify" id="g-notify">
    <summary class="adm-btn adm-btn--secondary adm-btn--square">
        <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>        <span class="adm-sr-only">1 unread notification</span>
        <span class="adm-notify__count" aria-hidden="true">1</span>    </summary>
    <div class="adm-menu adm-notify__menu">
        <div class="adm-menu__header">Notifications</div>
                                <a class="adm-notify__item adm-notify__item--unread"  href="#" >
                <span class="adm-notify__title">Sheet export failed</span>
                <span class="adm-notify__text">Quota exceeded. Retrying in 15 minutes.</span>                <span class="adm-notify__text">3 hours ago</span>            </a>
                                <a class="adm-notify__item"  href="#" >
                <span class="adm-notify__title">Rebuild finished: Early entry</span>
                                <span class="adm-notify__text">Yesterday</span>            </a>
                            <div class="adm-menu__sep" role="separator"></div>
            <a class="adm-menu__item" href="#">View all</a>
            </div>
</details>
    <details class="adm-dropdown adm-notify">
    <summary class="adm-btn adm-btn--secondary adm-btn--square">
        <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>        <span class="adm-sr-only">120 unread notifications</span>
        <span class="adm-notify__count" aria-hidden="true">99+</span>    </summary>
    <div class="adm-menu adm-notify__menu">
        <div class="adm-menu__header">Notifications</div>
                    <div class="adm-notify__empty">No new notifications</div>
                    </div>
</details></div>