shadcn.io is not affiliated with official shadcn/ui
HR Portal Sidebar Block for React
An HR portal in a fixed-height window whose sidebar is a people directory: 24 people under sticky letter headings with an A to Z rail that jumps to a letter, and a card for the chosen person with a manager button.
Installation
Overview
Find a person in a long directory with this HR portal sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar that lists 24 people, each an initials Avatar with a name and a role, grouped by the first letter of their surname under letter headings that stick to the top while the group scrolls. On the rail's edge an A to Z strip has a button for every letter that has someone and plain letters for the rest; a button scrolls the list to its group, and Up and Down move between the buttons. The page is the chosen person's card: initials, role and team, and a Data List of start date, time with the company, place, manager and direct reports. The manager is a button that opens that person and scrolls the rail to them. Folded to icons, the rail is a column of initials with tooltips; on a phone it is a sheet. There are no photos. It's built from Sidebar, Avatar, Data List, Badge and Guides, with a CSS entrance only. For people directories, rosters and any list with an alphabet.
FAQ
How does the A to Z rail work?
Every letter of the alphabet is drawn, but only the 16 that start a surname in the list are buttons, named with their count ("M, 2 people"); the other ten are plain, hidden letters. A button sets the scroller's scrollTop so its group's heading meets the top edge, never scrollIntoView. The rail is one tab stop: Tab reaches the letter that is at the top of the list, and ArrowDown and ArrowUp move between the buttons, wrapping at the ends.
Which letter is current?
The one whose group is at the top of the list. The block listens for scroll on the document in the capture phase, since the scroll area's events don't bubble, and takes the last group whose top is at or above a line just under the top edge. A group near the end can't scroll to the top, so after a jump the block keeps that letter current until you scroll away.
What is derived on the card?
Time with the company is counted from the start date to one fixed date in the file, so it reads the same for everyone, and direct reports are counted from the other people's manager field. Nothing is typed twice. The manager button opens that person, scrolls the rail so their row is in the middle of it and puts focus on the card; the managing director has no manager and says so.
What happens when the sidebar folds to icons?
The letter headings and the A to Z strip go, and each person is their initials with a tooltip carrying the name, so the 24 people stay one press away. Unfolding brings the strip back with the letter that was at the top.
What stays in the page, and how do I connect it?
Everything. The 24 people are invented and typed in PEOPLE, nothing is looked up or saved, and the block sets persist={false} and shortcut={false} so it writes no cookie. Replace the list with your directory, keep it in surname order, and the letters, counts and groups follow. The people are links to # whose handler shows the card instead of navigating. They're SidebarMenuButtons with render set to an a element.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The directory and the A to Z strip are inside it. Choosing a person closes the sheet, puts focus back on the button and shows their card.
Related
- Pro
Supply Chain Sidebar
App contentA freight portal in a fixed-height window whose sidebar is a vendor scorecard: ten vendors in a table under three sort buttons, a line that says the order, and a lanes table on the page for the chosen vendor.
- Pro
Scrollable Content Sidebar
Headers and sectionsAn all-in-one workspace in a fixed-height window whose wide sidebar scrolls six groups of pages under sticky group labels, with a line that says which group is at the top and a Jump to select that scrolls to one.
- Pro
Sticky Header Sidebar
Headers and sectionsA store admin in a fixed-height window whose sidebar keeps its header and footer in place over eighteen scrolling pages, with a hairline that appears only while there is something to scroll, a filter, and a Back to top button.
- Pro
Dual Column Sidebar
Icon railsA site builder in a fixed-height window whose single sidebar is two columns: an icon rail of sections and, beside it, a panel of the browsed section's pages, with the open page kept across sections.
- 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
Emoji Labels Sidebar
App contentA team wiki in a fixed-height window whose muted sidebar gives every page a glyph you choose from a popover of eight named icons, shown in the rail and in the page title, with a Reset icons button.