Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

code

Expend code


    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
        <BreadcrumbSeparator />
        <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        <BreadcrumbSeparator />
        <BreadcrumbText>Breadcrumb</BreadcrumbText>
      </BreadcrumbList>
    </Breadcrumb>


    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
        <BreadcrumbSeparator />
        <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        <BreadcrumbSeparator />
        <BreadcrumbText>Breadcrumb</BreadcrumbText>
      </BreadcrumbList>
    </Breadcrumb>

#Custom separator

code

Expend code


    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
        <BreadcrumbSeparator separator={<Slash size={13} className="-rotate-12" />} />
        <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        <BreadcrumbSeparator separator={<Slash size={13} className="-rotate-12" />} />
        <BreadcrumbText>Breadcrumb</BreadcrumbText>
      </BreadcrumbList>
    </Breadcrumb>


    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
        <BreadcrumbSeparator separator={<Slash size={13} className="-rotate-12" />} />
        <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        <BreadcrumbSeparator separator={<Slash size={13} className="-rotate-12" />} />
        <BreadcrumbText>Breadcrumb</BreadcrumbText>
      </BreadcrumbList>
    </Breadcrumb>

#Collapsed

code

Expend code


    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
        <BreadcrumbSeparator />
        <DropdownMenu>
          <DropdownMenuTrigger toggleStatusBar={toggleStatusBar1} buttonRef={buttonRef1}>
            <Button className="text-gray-500 hover:text-foreground hover:opacity-100">
              <Ellipsis size={15} />
            </Button>
          </DropdownMenuTrigger>
            <DropdownMenuContent
              showStatusBar={showStatusBar1}
              toggleStatusBar={toggleStatusBar1}
              menuRef={menuRef1}
              buttonRef={buttonRef1}
            >
              <DropdownMenuItem href="/">Home</DropdownMenuItem>
              <DropdownMenuItem href="/docs/components/breadcrumb">Breadcrumb</DropdownMenuItem>
              <DropdownMenuItem href="/examples">Examples</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
        <BreadcrumbSeparator />
        <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        <BreadcrumbSeparator />
        <BreadcrumbText>Breadcrumb</BreadcrumbText>
      </BreadcrumbList>
    </Breadcrumb>


    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
        <BreadcrumbSeparator />
        <DropdownMenu>
          <DropdownMenuTrigger toggleStatusBar={toggleStatusBar1} buttonRef={buttonRef1}>
            <Button className="text-gray-500 hover:text-foreground hover:opacity-100">
              <Ellipsis size={15} />
            </Button>
          </DropdownMenuTrigger>
            <DropdownMenuContent
              showStatusBar={showStatusBar1}
              toggleStatusBar={toggleStatusBar1}
              menuRef={menuRef1}
              buttonRef={buttonRef1}
            >
              <DropdownMenuItem href="/">Home</DropdownMenuItem>
              <DropdownMenuItem href="/docs/components/breadcrumb">Breadcrumb</DropdownMenuItem>
              <DropdownMenuItem href="/examples">Examples</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
        <BreadcrumbSeparator />
        <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        <BreadcrumbSeparator />
        <BreadcrumbText>Breadcrumb</BreadcrumbText>
      </BreadcrumbList>
    </Breadcrumb>

#Dropdown

code

Expend code


    <Breadcrumb>
      <BreadcrumbList>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        <BreadcrumbSeparator />
          <DropdownMenu>
            <DropdownMenuTrigger toggleStatusBar={toggleStatusBar2} buttonRef={buttonRef2}>
              <div className="flex items-center text-gray-500">
                Components
                <ChevronDown size={20} />
              </div>
            </DropdownMenuTrigger>
              <DropdownMenuContent
                showStatusBar={showStatusBar2}
                toggleStatusBar={toggleStatusBar2}
                menuRef={menuRef2}
                buttonRef={buttonRef2}
              >
                <DropdownMenuItem href="/">Home</DropdownMenuItem>
                <DropdownMenuItem href="/docs/components/breadcrumb">Breadcrumb</DropdownMenuItem>
                <DropdownMenuItem href="/examples">Examples</DropdownMenuItem>
              </DropdownMenuContent>
          </DropdownMenu>
        <BreadcrumbSeparator />
          <BreadcrumbText>Breadcrumb</BreadcrumbText>
      </BreadcrumbList>
    </Breadcrumb>


    <Breadcrumb>
      <BreadcrumbList>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        <BreadcrumbSeparator />
          <DropdownMenu>
            <DropdownMenuTrigger toggleStatusBar={toggleStatusBar2} buttonRef={buttonRef2}>
              <div className="flex items-center text-gray-500">
                Components
                <ChevronDown size={20} />
              </div>
            </DropdownMenuTrigger>
              <DropdownMenuContent
                showStatusBar={showStatusBar2}
                toggleStatusBar={toggleStatusBar2}
                menuRef={menuRef2}
                buttonRef={buttonRef2}
              >
                <DropdownMenuItem href="/">Home</DropdownMenuItem>
                <DropdownMenuItem href="/docs/components/breadcrumb">Breadcrumb</DropdownMenuItem>
                <DropdownMenuItem href="/examples">Examples</DropdownMenuItem>
              </DropdownMenuContent>
          </DropdownMenu>
        <BreadcrumbSeparator />
          <BreadcrumbText>Breadcrumb</BreadcrumbText>
      </BreadcrumbList>
    </Breadcrumb>

Breadcrumb

The properties of the Breadcrumb component used for page navigation.

Prop	Type	Default	Description
children	React.ReactNode	-	Passes the content that includes each item of the Breadcrumb.

BreadcrumbList

An element that composes a list within the Breadcrumb.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes multiple items in a list format within the Breadcrumb.

BreadcrumbLink

An element that provides a link for a Breadcrumb item.

Prop	Type	Default	Description
href	string	-	Specifies the URL to navigate to when clicked.
children	React.ReactNode	-	Includes the link text or content.

BreadcrumbSeparator

An element that separates the items in the Breadcrumb.

Prop	Type	Default	Description
children	React.ReactNode	<ChevronRight size={20} className="text-gray-500" />	Can include a separator symbol or text.

BreadcrumbText

A text element that indicates the current position within the Breadcrumb.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes the text that describes the current position.