shadcn.io is not affiliated with official shadcn/ui
Split Layout Navbar Block for Ark UI
An app bar split by a solid divider that meets the top rule: navigation at the start, and at the end a help link and an avatar whose menu sets your presence (Active, Away, Do not disturb) and recolours its dot.
Installation
Overview
A two-part app bar for React with Ark UI, for a shift-scheduling app called Rostermoon. A solid vertical divider that meets the top rule splits the bar: the wordmark and Schedule (current, marked by a foreground stroke on the bar's bottom edge), Shifts, Team and Time off at the start, and the utilities in a cell of their own at the end. The utility cell holds a help link (an icon button with a tooltip) and the viewer's avatar with a presence dot. The avatar opens a menu over the page with a radio list: Active, Away, Do not disturb. Choosing one recolours the dot (solid for Active, hollow for Away, solid with a minus for Do not disturb), renames the button, says so in a polite line and returns focus to the avatar. The dot is drawn in the foreground tone; the warning colour appears only on the Do not disturb row's icon. Below the md breakpoint the links move into a sheet from the top and the utility cell stays. It's built from Dropdown Menu, Avatar, Status, Tooltip, Sheet, Guides and Button, with your theme's tokens for every colour. For apps where teammates need to see who is around.
FAQ
How do I change the presences?
Edit PRESENCES at the top of the file: an id, a label, an icon and the hint under it. The menu is built from the list; the dot's three looks come from Dot, which draws a solid, a hollow or a minus-marked dot from the id. The person (SELF) and the pages are made up for the demo. The choice lives in the block's state: in an app, send it to your presence service from choose.
Why are the dots black and white, not green, amber and red?
Colour alone isn't a state: a hollow dot, a solid one and a solid one with a minus read the same for everyone and in every theme. Do not disturb also shows the warning token, but only on the menu row's icon, never on text or on the dot.
How does it work with a keyboard and a screen reader?
The links sit in a nav named Main. The help button is a link named "Help center", with a tooltip on hover and focus. The avatar button is named "Imani Koroma, presence: Active. Change presence", says whether the menu is open and opens it on Enter or Space. The rows are radio items; the checked one is the current presence. After a choice a hidden status line says "Presence: Away." Escape closes the menu and returns focus to the avatar, and so does choosing a row.
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.
How does it work on a phone?
Below the md breakpoint the bar shows the wordmark, a menu button and the avatar; the help link moves to the sheet below sm, so nothing wraps at 320 pixels. The sheet from the top holds the links and Help center; Escape, the close button or choosing a link closes it and focus goes back to the menu button. The presence menu opens under the avatar and never wider than the screen.
Does it work right to left?
Yes. The bar mirrors, the divider stays between the two cells, the menu opens under the avatar's end edge, the dot sits on the avatar's end corner and the checks follow the direction. The wordmark is artwork and keeps its direction. Wrap the block in your locale provider so the menu follows the page.