# Breadcrumb
> Location trail for the app header - a nav landmark with an ordered list, links, a current page and directional separators.
Source: https://docs.nasaqui.com/components/breadcrumb
## Install
```bash
npx shadcn@latest add https://docs.nasaqui.com/r/breadcrumb.json
```
Shows where the user is in a hierarchy (workspace, project, page) and lets them jump back up. It is a
set of small composable parts, not a data-driven component: you write one `BreadcrumbItem` per level.
It has no story of its own; it appears in the header of the **App Shell** pattern story.
## When to use
- Hierarchies two or more levels deep, in the `AppHeader`.
- Pages the user can reach from several places, where "where am I" is not obvious.
## When not to use
- Primary navigation: use `SidebarItem`s in [`AppShell`](https://docs.nasaqui.com/components/app-shell).
- Steps in a flow: use a stepper or tabs.
- One-level pages: use a page heading.
## Import
```tsx
import {
Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@fadymondy/nasaq/web";
export function Trail() {
return (
3x1ProjectsNasaq
);
}
```
## Anatomy
```
Breadcrumb data-slot="breadcrumb"