NOTE: Introduced feature in
v0.2.0
.
Breadcrumb
is typically used to render a series of links with separators. With the each link left of the right-most a state in the end-user's navigation history. Or, a route hierarchy of the Web Application. e.g. directory paths
<script>
import {Breadcrumb} from "@kahi-ui/framework";
</script>
<Breadcrumb.Container>
<Breadcrumb.Anchor href="#">
home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
pictures
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
IMG_20191123_121131.jpg
</Breadcrumb.Anchor>
</Breadcrumb.Container>
Imports
<script>
import {Breadcrumb} from "@kahi-ui/framework";
const {
Container,
Anchor,
Button,
Group,
Separator,
} = Breadcrumb;
</script>
Separator
You can alter the separator between items rendered via the separator
property.
<script>
import {Breadcrumb} from "@kahi-ui/framework";
</script>
<Breadcrumb.Container separator=">">
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
John Doe
</Breadcrumb.Anchor>
</Breadcrumb.Container>
Palette
NOTE: Introduced feature in
v0.6.0
.
You can change the color palette of the Breadcrumb.Anchor
/ Breadcrumb.Button
Components via the palette
property.
<script>
import {
Breadcrumb,
Stack,
} from "@kahi-ui/framework";
</script>
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<Breadcrumb.Container>
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
DEFAULT
</Breadcrumb.Anchor>
</Breadcrumb.Container>
<Breadcrumb.Container palette="accent">
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
ACCENT
</Breadcrumb.Anchor>
</Breadcrumb.Container>
<Breadcrumb.Container palette="neutral">
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
NEUTRAL
</Breadcrumb.Anchor>
</Breadcrumb.Container>
<Breadcrumb.Container palette="dark">
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
DARK
</Breadcrumb.Anchor>
</Breadcrumb.Container>
<Breadcrumb.Container palette="light">
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
LIGHT
</Breadcrumb.Anchor>
</Breadcrumb.Container>
<Breadcrumb.Container palette="affirmative">
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
AFFIRMATIVE
</Breadcrumb.Anchor>
</Breadcrumb.Container>
<Breadcrumb.Container palette="informative">
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
INFORMATIVE
</Breadcrumb.Anchor>
</Breadcrumb.Container>
<Breadcrumb.Container palette="negative">
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
NEGATIVE
</Breadcrumb.Anchor>
</Breadcrumb.Container>
</Stack.Container>
Elements
NOTE: Introduced feature in
v0.6.0
.
You can render Breadcrumb
items as <button>
HTML tags by using <Breadcrumb.Button>
, which is useful if your navigation doesn't work via URLs.
<script>
import {
Breadcrumb,
Stack,
} from "@kahi-ui/framework";
</script>
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<Breadcrumb.Container>
<Breadcrumb.Anchor href="#">
Home
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#">
Contacts
</Breadcrumb.Anchor>
<Breadcrumb.Anchor href="#" active>
Anchor
</Breadcrumb.Anchor>
</Breadcrumb.Container>
<Breadcrumb.Container>
<Breadcrumb.Button>Home</Breadcrumb.Button>
<Breadcrumb.Button>Contacts</Breadcrumb.Button>
<Breadcrumb.Button active>
Button
</Breadcrumb.Button>
</Breadcrumb.Container>
</Stack.Container>