Notification dropdown

Updated 2026-05-19

Confidence anatomy medium variants medium motion high a11y high content low

Anatomy

1
Container
the navigation region — typically a landmark role (nav/banner)
2
Items
individual navigable entries; one is marked "current" when applicable
3
Item label
short, scannable text; never sentence case
4
Item icon (optional)
reinforces meaning at a glance; not a substitute for label
5
Active indicator
visual treatment for the current item — underline, bar, fill, or background
6
Trigger (optional)
opens a dropdown/menu for grouped or contextual items

Property 1
`Empty`
`List`

hover/focus transitions on items stay subtle — no large translation

dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button