Navigation Molecules
ImportCC
Available via @stackmates/ui-interactive/molecules
Breadcrumb
Compound component for navigation breadcrumb trails. Shows current page location in the hierarchy.
Breadcrumb / BreadcrumbList / BreadcrumbItem / BreadcrumbLink / BreadcrumbPage / BreadcrumbSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | BreadcrumbList containing BreadcrumbItem, BreadcrumbSeparator elements |
| className | string | — | Additional CSS classes on the nav element |
Installation
typescript
import {
Breadcrumb, BreadcrumbList, BreadcrumbItem,
BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from '@stackmates/ui-interactive/molecules';Usage
Basic 3-level breadcrumb
tsx
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Current</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Accessibility
- Renders a <nav> with aria-label="breadcrumb"
- BreadcrumbPage uses aria-current="page" for the active page
- BreadcrumbSeparator uses aria-hidden="true" and role="presentation"
Related:
NavigationMenu
Radix-based top-level navigation with animated dropdown content panels. Supports triggers, links, and viewport.
NavigationMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| viewport | boolean | true | Render the animated viewport container for dropdown content |
| className | string | — | Additional CSS classes on the root element |
Installation
typescript
import {
NavigationMenu, NavigationMenuList, NavigationMenuItem,
NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
} from '@stackmates/ui-interactive/molecules';Usage
Simple link item
tsx
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Accessibility
- Built on Radix NavigationMenu primitive with full keyboard support
- Arrow keys navigate between menu items
- Escape closes open dropdown content
- ChevronDown icon rotates to indicate open/closed state
Related:
TabsRx
Radix tabs with Rx suffix to avoid conflict with atoms/Tabs. Supports controlled and uncontrolled modes.
Project summary with key metrics and recent activity.
TabsRx
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | The initial active tab value (uncontrolled) |
| value | string | — | The active tab value (controlled) |
| onValueChange | (value: string) => void | — | Callback fired when the active tab changes |
| className | string | — | Additional CSS classes on the root element |
Installation
typescript
import {
TabsRx, TabsListRx, TabsTriggerRx, TabsContentRx,
} from '@stackmates/ui-interactive/molecules';Usage
Controlled tabs
tsx
const [tab, setTab] = useState('first');
<TabsRx value={tab} onValueChange={setTab}>
<TabsListRx>
<TabsTriggerRx value="first">First</TabsTriggerRx>
<TabsTriggerRx value="second">Second</TabsTriggerRx>
</TabsListRx>
<TabsContentRx value="first">Content 1</TabsContentRx>
<TabsContentRx value="second">Content 2</TabsContentRx>
</TabsRx>Accessibility
- Built on Radix Tabs with role="tablist", role="tab", role="tabpanel"
- Arrow keys navigate between triggers
- Focus management follows WAI-ARIA Tabs pattern
- Active trigger has data-state="active" for styling
Related:
ScrollArea
Custom scrollable container with cross-browser styled scrollbar. Built on Radix ScrollArea.
ScrollArea
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'auto' | 'always' | 'scroll' | 'hover' | 'auto' | Scrollbar visibility behavior |
| className | string | — | Set dimensions via Tailwind (e.g. h-[200px] w-[350px]) |
| children* | ReactNode | — | Scrollable content |
Installation
typescript
import { ScrollArea } from '@stackmates/ui-interactive/molecules';Usage
Fixed-height scrollable list
tsx
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
{items.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ScrollArea>Accessibility
- Viewport is focusable for keyboard scrolling
- Scrollbar thumb has a minimum 44px touch target
- Supports vertical and horizontal orientations
Related:
Pagination
Compound pagination controls with previous/next, page links, and ellipsis. Uses anchor-based links by default.
Pagination
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes on the nav element |
PaginationLink
| Prop | Type | Default | Description |
|---|---|---|---|
| isActive | boolean | — | Highlights the link as the current page |
| href | string | — | Link destination URL |
Installation
typescript
import {
Pagination, PaginationContent, PaginationItem,
PaginationLink, PaginationPrevious, PaginationNext,
PaginationEllipsis,
} from '@stackmates/ui-interactive/molecules';Usage
Static pagination
tsx
<Pagination>
<PaginationContent>
<PaginationItem><PaginationPrevious href="/page/1" /></PaginationItem>
<PaginationItem><PaginationLink href="/page/2" isActive>2</PaginationLink></PaginationItem>
<PaginationItem><PaginationNext href="/page/3" /></PaginationItem>
</PaginationContent>
</Pagination>Accessibility
- Root nav has role="navigation" and aria-label="pagination"
- Active page link uses aria-current="page"
- Previous/Next have descriptive aria-labels
- Ellipsis has sr-only "More pages" text
Related:
StepsList
Progress steps indicator with status icons (pending, active, complete, error). Suited for pipeline and workflow visualization.
Data Pipeline
Fetch source data
2.4s
Validate schema
132 rows valid
Transform records
Processing batch 3 of 5...
Load into warehouse
Send notifications
SMTP timeout after 30s
StepsListProps
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | StepInfo[] | — | Array of { label, status, message? } where status is pending | active | complete | error |
| title | string | 'Pipeline Steps' | Heading text above the steps list |
Installation
typescript
import { StepsList } from '@stackmates/ui-interactive/molecules';
import type { StepInfo } from '@stackmates/ui-interactive/molecules';Usage
Basic pipeline steps
tsx
<StepsList
title="Import Pipeline"
steps={[
{ label: 'Upload file', status: 'complete' },
{ label: 'Validate', status: 'active', message: 'Checking...' },
{ label: 'Import', status: 'pending' },
]}
/>Accessibility
- Uses distinct icons (check, spinner, X) alongside color to convey status
- data-testid="steps-section" for test targeting
- Returns null when steps array is empty
Related:
Menubar
Horizontal menu bar with dropdown sub-menus built on Radix Menubar. Ideal for desktop-style application menus with keyboard navigation.
Menubar / MenubarMenu / MenubarTrigger / MenubarContent / MenubarItem
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | MenubarMenu elements containing triggers and content |
| className | string | — | Additional CSS classes on the root element |
Installation
typescript
import {
Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
MenubarItem, MenubarSeparator, MenubarGroup,
MenubarSub, MenubarRadioGroup, MenubarPortal,
} from '@stackmates/ui-interactive/molecules';Usage
Application menu bar
tsx
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New</MenubarItem>
<MenubarItem>Save</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>Accessibility
- Built on Radix Menubar with role="menubar"
- Arrow keys navigate between menu triggers horizontally
- Arrow keys navigate items vertically within open menu
- Escape closes the current menu
Related:
ThemeSwitcher
Dropdown menu for switching color themes. Reads and persists the active theme in localStorage, applying a data-theme attribute to the document root.
Click the palette icon to switch color themes. Changes persist via localStorage.
ThemeSwitcher
| Prop | Type | Default | Description |
|---|---|---|---|
| (none) | - | — | ThemeSwitcher has no configurable props. It reads/writes data-theme from localStorage and applies it to document.documentElement. |
Installation
typescript
import { ThemeSwitcher } from '@stackmates/ui-interactive/molecules';Usage
In a page header
tsx
<header className="flex items-center gap-2">
<h1>My App</h1>
<ThemeSwitcher />
</header>Accessibility
- Trigger button has sr-only "Switch theme" label for screen readers
- Built on Radix DropdownMenu with full keyboard navigation
- Check icon indicates the currently active theme
Related: