SGUI / Development
Breadcrumbs
A named navigation landmark with a non-link current item.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
A named navigation landmark with a non-link current item.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
A named navigation landmark with a non-link current item.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Breadcrumbs, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function BreadcrumbsPlaygroundExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<Breadcrumbs label={"Course breadcrumb"} items={[{id:"home",label:"Home",href:"#home"},{id:"courses",label:"Courses",href:"#courses"},{id:"current",label:"Leadership foundations"}]} />
</ThemeScope>
</>
);
}
The same props in independent density scopes.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Breadcrumbs, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function BreadcrumbsPlaygroundDensitiesExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Breadcrumbs label={"Course breadcrumb"} items={[{id:"home",label:"Home",href:"#home"},{id:"courses",label:"Courses",href:"#courses"},{id:"current",label:"Leadership foundations"}]} /></ThemeScope>
<ThemeScope density="comfortable"><Breadcrumbs label={"Course breadcrumb"} items={[{id:"home",label:"Home",href:"#home"},{id:"courses",label:"Courses",href:"#courses"},{id:"current",label:"Leadership foundations"}]} /></ThemeScope>
</Stack>
</>
);
}