shadcn.io is not affiliated with official shadcn/ui
Split Layout Navbar Block for React
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 Base 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, Space or the Down arrow opens the menu with focus on the first row; the arrow keys, Home and End move between rows, 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 direction provider (the catalog's DirectionProvider) so the menu follows the page.
Related
- Pro
Account Menu Navbar
Accounts and scopesAn 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.
- Pro
Workspace Switcher Navbar
Accounts and scopesAn app bar whose switcher button opens a searchable list of workspaces: recent ones first with number keys, a plan badge on every row, a check on the current one and a Create workspace button in the foot.
- Pro
Multi-Tenant Navbar
Accounts and scopesAn app bar with two chained scopes, organization then project: choosing an organization rewrites the project list, and a role badge sits beside the organization's name.
- Pro
Create Menu Navbar
App toolbarsAn app bar with a Shine Create button that opens a grouped menu with working key hints and a New from template submenu, and a bottom drawer with the same rows on phones.
- Pro
Notification Bell Navbar
Meters and progressAn app navbar for a team inbox with a bell whose count follows what you do: the bell opens a panel with All and Unread tabs, rows you can mark read, mark unread or dismiss, and Mark all as read, and a drawer on phones.
- Pro
SaaS Marketing Navbar
Mega menusA one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain links with the current page marked, Sign in and a Shine Button, and a sheet with the same links on phones.