shadcn.io is not affiliated with official shadcn/ui
Saved Views Dashboard Navbar Block for React
A dashboard bar whose page title is a menu of saved views, Pinned and Shared, with a star on the one that opens first, a breadcrumb that follows the choice and a drawer on phones.
Installation
Overview
A saved-views menu for React with Base UI, in the dashboard bar of an operations tool called Quayby. One bar between the page's rails, split by a solid divider that meets the top rule: the wordmark at the start, then a breadcrumb (Operations, the view's area) that ends in the page title, and Share with one Shine Button at the end. The title is a button. It opens a menu in two groups, Pinned (Overview, Revenue) and Shared (Support queue), each row showing its area, a star on the view that opens first, and a "Save current view" row that makes the current view the one that opens first. Choosing a view rewrites the title and the breadcrumb's last crumb, says so in a polite line and returns focus to the title. On a phone the crumbs go and the title opens a drawer from the bottom with the same views and the same save button. It's built from Dropdown Menu, Drawer, Guides, Shine Button and Button, with your theme's tokens for every colour. For dashboards where people keep a handful of views and want to jump between them without leaving the page.
FAQ
How do I change the views and the groups?
Edit VIEWS at the top of the file: an id, a name, an area (the breadcrumb's last crumb) and a group, "pinned" or "shared". The menu's two groups, the drawer's two lists and the unseen copies that hold the title's width are all built from it. The views are made up for the demo. In an app, replace the setId in pick with your router's view change.
What does Save current view do?
It makes the current view the one that opens first and moves the star to it, and a polite line says so ("Support queue saved as your default view. It opens first."). While the current view already is that one, the row is disabled. The choice lives in the block's state only; nothing is stored or sent, so a reload goes back to Overview. Wire save to your own preferences.
How does it work with a keyboard and a screen reader?
The title is a button named "Saved view: Overview" that says whether the menu is open. Enter or Space opens it, the arrow keys move through the rows, Enter or Space chooses, and Escape closes it. Focus returns to the title after any choice and after Escape. The groups are named Pinned and Shared, the current view is announced as checked, and the star is read as "(opens first)". The breadcrumb is a nav named Breadcrumb whose last item is the current page.
How does it work on a phone?
Below the md breakpoint the bar shows the wordmark's icon, the title (its name, with a chevron) and a Shine Button reduced to a plus; Share and the crumbs are hidden and nothing wraps at 320 pixels. The title opens a drawer from the bottom with a grabber: the two groups as buttons (the current one pressed), the save button and Close. Choosing a view or saving closes it and focus goes back to the title; Escape does the same.
Does it work right to left?
Yes. The bar mirrors, the divider stays after the wordmark, the crumbs' chevrons flip and the menu opens under the title's start edge. The wordmark is artwork and keeps its direction.
Wrap the block in your direction provider (the catalog's DirectionProvider) so the menu and the drawer follow the page.
Related
- Pro
Dropdown Breadcrumb Navbar
Page headersA page header whose breadcrumb is a menu bar: every crumb opens a list of its siblings with the current one checked, Left and Right move between the crumb menus, and a phone keeps the last two crumbs and opens the rest in a drawer.
- Pro
Split Layout Navbar
Cells and splitsAn 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.
- Pro
Date Range Picker Navbar
App toolbarsAn analytics navbar for a product-analytics tool: scrolling report tabs, a date-range picker with presets and a calendar, and an Export action.
- Pro
An admin navbar for a marketplace console: a sidebar toggle, a search field scoped to Users, Orders or Logs, and a badge that counts pending approvals.
- 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
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.