shadcn.io is an independent project built on shadcn/ui
The trail reads Home, then a select, then Breadcrumb as the current page. The select lists Documentation, Components, and Themes, and it starts on Components. Choosing one does not change the page.
Use it for sibling sections at the same depth, such as a workspace or a version. Navigate yourself when the value should change the URL. Links that are not a single value fit a Dropdown Menu. In React, Base UI does not route from the select.
Installation
Anatomy
Usage
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<Select defaultValue="components" items={sections}>
<SelectTrigger aria-label="Section" className="w-auto" size="sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{sections.map((section) => (
<SelectItem key={section.value} value={section.value}>
{section.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>FAQ
How does the select start on Components?
defaultValue is components, and items lets SelectValue show its label.
How does the select fit in the line?
SelectTrigger takes size="sm", and the trigger is only as wide as its value, so it sits in the trail like a crumb.
How is the select named?
It has no visible label, so it carries aria-label="Section" and is announced as the Section select with its value.
Does picking an option change the page?
Not in the demo: the select is uncontrolled and nothing listens.
onValueChange receives the new value; navigate there.
API Reference
Breadcrumb
No extra props in this demo. The rest is on the Breadcrumb page.
Select
Sets defaultValue="components", items={sections}, aria-label="Section", size="sm" and value={section.value}. The rest is on the Select page.
