shadcn.io is not affiliated with official shadcn/ui
Tab Groups Sidebar Block for React
A markdown editor in a fixed-height window whose sidebar has a tab strip over its list, switching between Files, the open file's Outline and Bookmarks, each keeping its own selection and marking the chosen line in the document.
Installation
Overview
Let one sidebar list three things with this tab groups sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar, and over its list sits a Tabs strip in the line style: Files, Outline and Bookmarks. Files lists four typed documents; Outline lists the headings of the open file, taken from its own lines; Bookmarks pins lines across files. Choose a heading or a bookmark and that line is marked in the document on the page, which scrolls it into view, opening the bookmark's file first if it is another. Each tab keeps its own selection, so going back to Outline still shows the heading you picked. Folded to icons, the rail keeps the Files icons with tooltips and the tabs go with the labels. It's built from Sidebar, Tabs and Guides, with a CSS entrance only. Below the medium breakpoint the rail is a sheet. For editors, readers, docs and any app where one sidebar has to show several views of the same thing.
FAQ
How do the tabs and the sidebar work together?
The tab strip and its three panels sit inside the sidebar's content, in the nav named after the product. Which tab is open is the block's own state, tab, so it survives the sidebar folding and unfolding. Each list is a normal sidebar menu: links to # whose handler changes state instead of navigating. Folded to icons, a second copy of the Files menu takes the tabs' place, because the tab strip has no icon form; only one of the two is ever visible, and the hidden one is out of the tab order and the reading order.
What does each tab keep?
Its own selection. Files keeps the open file, Outline keeps the heading you picked in that file (it clears when another file opens, since the headings change), and Bookmarks keeps the last bookmark you used while its file is open. The line marked in the document is whichever you chose last, and the status line says which: "Marked line 8 of README.md: Share". Choosing a bookmark in the file you already have open keeps your Outline pick.
How is the line marked and scrolled?
The marked line gets a bar at its start, a light fill and aria-current="location", so the mark isn't only visual. The document is a scrollable region the block scrolls itself by setting its scrollTop to the line's offset, never with scrollIntoView, which would move the page the block sits on. Opening a file with nothing marked scrolls back to the top.
What stays in the page, and how do I connect it?
Everything. The four documents are typed in DOCS as lines (headings, paragraphs and code), the outline is derived from them and the bookmarks point at line ids in BOOKMARKS. Replace those with your files and your parser's headings. The links go to # whose handler shows the file or line instead of navigating. They're SidebarMenuButtons with render set to an a element. Nothing is edited, saved or synced.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button opens from the start edge, the right in a right-to-left layout, with the tabs inside it. Choosing a file, heading or bookmark closes the sheet, puts focus back on the button and marks the line behind it; the status line says where. The window keeps its height.
Is it accessible?
The strip is a tab list named "What the sidebar lists", with arrow keys moving between its tabs. Each menu is named, headings and bookmarks say their line number in their names, and the current file is marked as the current page while the current heading or bookmark is marked as the current location. The marked line in the document carries the same attribute. One polite status line reports every choice, and the document is a scrollable region you can reach with Tab, named by the file's heading.
Related
- Pro
Documentation Tree Sidebar
Folds and treesA docs host in a fixed-height window whose sidebar is a numbered outline that opens the folds above the page you choose, an Auto-collapse switch that closes the rest, a breadcrumb over the page and Previous and Next buttons in the top bar.
- Pro
File Tree Sidebar
Folds and treesA code editor in a fixed-height window whose slim sidebar is a file tree with file-type icons, arrow-key, Home, End, asterisk and type-ahead navigation, a Collapse all button, and the chosen file's lines and path on the page.
- Pro
Collapsible Groups Sidebar
Folds and treesA framework's docs in a fixed-height window whose slim sidebar has five groups that fold from their labels, with Expand all and Collapse all, a count of open groups and a dot on a folded group that holds the current page.
- Pro
Email Client Sidebar
App contentA mail client in a fixed-height window: mailboxes and labels whose counts follow the mail you file, a searchable message list beside the open message, and Compose for a local draft.
- Pro
Multi-Level Menu Sidebar
Folds and treesA grocery app in a fixed-height window whose inset sidebar drills down one level at a time, panel by panel up to four levels deep, with a back button, Escape and a breadcrumb that all go up.
- Pro
Brand Header Sidebar
Headers and sectionsA design-operations suite in a fixed-height window whose sidebar header is a brand lockup that opens a menu to go home, copy the logo name, copy the mark as SVG or open the brand guidelines.