Breadcrumbs

Path from a section root to the current page. type text is the trail. type menu opens siblings.

Default

text is a slash-separated trail. menu paints each crumb as a compact control.


        
          1
          
          <Breadcrumb type="text">
        

          2
          
            <BreadcrumbItem href="/">Home</BreadcrumbItem>
        

          3
          
            <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
        

          4
          
            <BreadcrumbItem active>Overview</BreadcrumbItem>
        

          5
          
          </Breadcrumb>
        

          6
          
          <Breadcrumb type="menu">
        

          7
          
            <BreadcrumbItem>Home</BreadcrumbItem>
        

          8
          
            <BreadcrumbItem>Dashboard</BreadcrumbItem>
        

          9
          
            <BreadcrumbItem active>Overview</BreadcrumbItem>
        

          10
          
          </Breadcrumb>

Active

Mark the current page with active. That item gets aria-current page.


        
          1
          
          <Breadcrumb>
        

          2
          
            <BreadcrumbItem href="/">Home</BreadcrumbItem>
        

          3
          
            <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
        

          4
          
            <BreadcrumbItem active>Overview</BreadcrumbItem>
        

          5
          
          </Breadcrumb>

Disabled

A segment that belongs in the path but is not reachable.


        
          1
          
          <Breadcrumb>
        

          2
          
            <BreadcrumbItem href="/">Home</BreadcrumbItem>
        

          3
          
            <BreadcrumbItem disabled>Dashboard</BreadcrumbItem>
        

          4
          
            <BreadcrumbItem active>Overview</BreadcrumbItem>
        

          5
          
          </Breadcrumb>

Menu slot

On type menu, the menu slot fills DropdownMenuContent. Use DropdownMenuItem for each sibling.


        
          1
          
          <Breadcrumb type="menu">
        

          2
          
            <BreadcrumbItem>
        

          3
          
              Home
        

          4
          
              <template #menu>
        

          5
          
                <DropdownMenuItem>Home</DropdownMenuItem>
        

          6
          
                <DropdownMenuItem>Projects</DropdownMenuItem>
        

          7
          
              </template>
        

          8
          
            </BreadcrumbItem>
        

          9
          
            <BreadcrumbItem active>Overview</BreadcrumbItem>
        

          10
          
          </Breadcrumb>

Best practices

Breadcrumbs orient, they do not replace primary nav. Three to five levels is enough; collapse the middle if the path is longer.
The last crumb is the current page and gets active. Earlier crumbs take href so they are real links.
type="text" for a simple trail. type="menu" only when a crumb has siblings the user might jump to.
Disable a segment that exists in the hierarchy but has no page. Do not leave a dead href that 404s.
Labels are Title Case nouns that match the page title: Projects, Settings. No “You are here”.