# Next.js Bootstrap Breadcrumb
Add a Next.js Bootstrap breadcrumb to App Router pages: static in a server component, or built from usePathname with next/link in a client component.
> This component is only available in **AdminKit PRO**. [Learn more](/pricing/#nextjs).
On a page a few levels deep, such as one invoice or a project's settings, people want to know where they are and how to get back. A breadcrumb answers both. It lists the path from Home to the current page, and every step above the current page is a link.
[AdminKit for Next.js](/nextjs/) has no breadcrumb component: you write Bootstrap's markup in JSX and use `next/link` for the links. Breadcrumbs are part of AdminKit PRO. The stylesheet of the free version leaves out Bootstrap's breadcrumb styles.
Plain markup needs no state, so a breadcrumb with fixed steps works in a server component page, without `"use client"`. A breadcrumb that reads the current URL is different: the hook that gives the URL, `usePathname()`, only works in a client component. Both are below.
## Example
When the steps of a page are known, write them in the page itself. `Link` from `next/link` works in server components, and the page keeps its `metadata` export:
```html
```
```tsx code title="src/app/(dashboard)/invoices/2041/page.tsx"
import Link from "next/link";
import { pageMetadata } from "@/lib/site";
export const metadata = pageMetadata("/invoices/2041");
export default function InvoicePage() {
return (
<>
Invoice 2041
);
}
```
`pageMetadata()` reads the title and description of a route from `src/data/pages.json`, so a new route needs an entry there.
## Classes
| Class | Element | Effect |
| --- | --- | --- |
| `breadcrumb` | `` | Lays out the steps in a row, without list bullets |
| `breadcrumb-item` | `
` | One step; adds the divider before every step except the first |
| `active` | the last `
` | Shows the current page in a muted color; add `aria-current="page"` too |
AdminKit leaves Bootstrap's breadcrumb as it is. For its Sass variables, see [Bootstrap's docs](https://getbootstrap.com/docs/5.3/components/breadcrumb/).
## Breadcrumb from the current route
To give every page a breadcrumb without writing it each time, build the steps from the URL. Each part of the path becomes a step that links to the path up to that part. The labels come from `src/data/pages.json`, the same list that gives each page its title. A path that is not in the list, such as an invoice number, shows the text from the URL.
`usePathname()` from `next/navigation` gives the current path, and the sidebar uses it to highlight the current page. It is a hook, and hooks only run in client components, so this file starts with `"use client"`:
```tsx title="src/components/breadcrumbs.tsx"
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import pages from "@/data/pages.json";
export function Breadcrumbs() {
const pathname = usePathname();
const segments = pathname.split("/").filter(Boolean);
const crumbs = [
{ path: "/", label: "Home" },
...segments.map((segment, index) => {
const path = `/${segments.slice(0, index + 1).join("/")}`;
const page = pages.find((entry) => entry.path === path);
return { path, label: page?.title ?? decodeURIComponent(segment) };
}),
];
return (
);
}
```
The component looks the titles up in `pages.json` itself. `getPage()` from `@/lib/site` would throw an error for a path that is not in the list.
Render `` from any page, above its title. A server component page can do that: the component takes no props. A client component still renders on the server first, so the static HTML of each page already contains its breadcrumb. `usePathname()` returns the path without the base path, and `next/link` adds the base path back, so the links also work when the app runs from a sub-path.
The demo's routes are one level deep, such as `/pages-settings`. There, the breadcrumb is Home and the page title. It gets longer once your own routes nest, for example `/invoices/2041`.
## Dividers
The slash between the steps is CSS, not markup. To change it on one breadcrumb, set `--bs-breadcrumb-divider` on the `