shadcn.io is not affiliated with official shadcn/ui
Account Menu Navbar Block for Solid
An app bar with an account button behind a split divider that opens a menu: an identity header with plan badge and storage bar, a Switch account radio list, and Profile, Settings, Billing and Sign out.
Installation
Overview
An account menu for Solid with Ark UI, in the app bar of a family-budget app called Mapleroot. The wordmark and the household's name lead, four links follow (Overview is current, marked by a foreground stroke on the bar's bottom edge), and a solid divider that meets the top rule sets off the account cell: an avatar and the name of whoever is signed in. The button opens a menu over the page: an identity header with the name, the email, a plan badge and a storage bar with its figures, a Switch account radio list of two accounts, then Profile, Settings, Billing and Sign out as links. Choosing the other account rewrites the header and the button's name, and a polite status says it. Below the md breakpoint the links move into a sheet from the top and the account button stays in the bar as an avatar. The block stays one bar high (64 pixels, 56 on a phone). It's built from Dropdown Menu, Avatar, Progress, Badge, Sheet, Guides and Button, with your theme's tokens for every colour. For apps whose bar needs one account control with a switcher in it.
FAQ
How do I change the accounts and the links?
Edit ACCOUNTS at the top of the file (an id, a name, an email, initials, a plan, and the gigabytes used and the quota) and PAGES and ENTRIES for the bar's links and the menu's links. The storage bar's width and the "9.3 of 15 GB used" line both come from the current account's two numbers, so they can't disagree. The household's name in HOUSEHOLD is plain text; make it a switcher with the Workspace Switcher block if you need one.
What does choosing another account do?
It sets the current account in the block's state: the header, the button's avatar and its name follow, the radio list moves its check, and a polite status says "Switched to Tomás Okafor." The button's name is drawn over a hidden copy of each account's name, so the bar keeps its width whoever is signed in. Nothing is stored and nothing is sent: wire the choice to your session. Focus goes back to the account button, with the keyboard or the pointer.
How does it work with a keyboard and a screen reader?
The links sit in a nav landmark named Main, after the wordmark (a link home). The account button is named "Dana Okafor account menu" and says whether it's expanded. The menu's groups are named (the identity header, Switch account) and its links are menu items.
Enter or Space opens the menu with focus on the menu itself; the Down arrow highlights the first row, Home and End jump to the ends, Enter chooses and Escape closes it.
Escape and choosing a row both return focus to the account button.
How does it work on a phone?
Below the md breakpoint the wordmark, a menu button and the avatar stay in the bar, and nothing wraps at 320 pixels; the household's name and the links move into a sheet from the top whose header lines up with the bar. The account menu opens under the avatar and never wider than the screen. Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button.
Does it work right to left?
Yes. The bar mirrors, the divider stays between the two cells, the menu opens under the button's start edge, the check and the arrows follow the direction, and the storage figures keep their order. The wordmark is artwork and keeps its direction. Wrap the block in your locale provider so the menu follows the page.