Components
Breadcrumb

Breadcrumb

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

StorybookFigma

Installation

npm @momo-ui add breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@momo-webplatform/mobase/components/Breadcrumb/Breadcrumb";
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="https://www.momo.vn/"><HomeIcon className="w-4 h-4" /></BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="https://www.momo.vn/cinema">Cinema</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="https://www.momo.vn/cinema/phim-chieu">Phim</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="https://www.momo.vn/cinema/phim-chieu">Phim chiếu</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Hành Tinh Cát: Phần Hai</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

Breadcrumb
PropTypeDefaultRequired
separator
enumReactNode--false
BreadcrumbList
PropTypeDefaultRequired
BreadcrumbItem
PropTypeDefaultRequired
BreadcrumbLink
PropTypeDefaultRequired
asChild
enumboolean--false
BreadcrumbPage
PropTypeDefaultRequired
BreadcrumbSeparator
PropTypeDefaultRequired
BreadcrumbEllipsis
PropTypeDefaultRequired

Example

Level 2:

Level 3:

Level 4:

Level 5:

Alert DialogButton