Breadcrumbs
Breadcrumbs display the user's current location within a navigational hierarchy, allowing them to trace their path back to the starting point.
Installation
$ cbui-cli install @crossbuildui/breadcrumbsTo get started, please make sure you have installed
cbui-cli globally and authenticated your account. This will ensure you can access all the necessary features.Import
index.tsx
1import { Breadcrumbs, BreadcrumbItem } from '@/crossbuildui/breadcrumbs';
2import Icon from 'react-native-vector-icons/MaterialIcons'; // If using custom iconsThe Breadcrumbs component uses
react-native-vector-icons for its default separator. Ensure this library is installed and linked in your Expo project.Basic Usage
Create a breadcrumb trail by nesting BreadcrumbItem components within a Breadcrumbs container. Use the isCurrent prop to indicate the active page.
index.tsx
1<Breadcrumbs>
2 <BreadcrumbItem href="/home">Home</BreadcrumbItem>
3 <BreadcrumbItem href="/products">Products</BreadcrumbItem>
4 <BreadcrumbItem isCurrent>Laptops</BreadcrumbItem>
5</Breadcrumbs>With Icons
You can include icons or other custom content within breadcrumb items using the startContent or endContent props.
index.tsx
1<Breadcrumbs>
2 <BreadcrumbItem href="/home" startContent={<Icon name="home" size={16} />}>
3 Home
4 </BreadcrumbItem>
5 <BreadcrumbItem href="/settings" startContent={<Icon name="settings" size={16} />}>
6 Settings
7 </BreadcrumbItem>
8 <BreadcrumbItem isCurrent startContent={<Icon name="person" size={16} />}>
9 Profile
10 </BreadcrumbItem>
11</Breadcrumbs>Variants & Colors
Breadcrumbs support light, solid, and bordered variants. The color prop applies to the items or the container background/border depending on the variant.
index.tsx
1// Light (default)
2<Breadcrumbs>
3 <BreadcrumbItem>Light</BreadcrumbItem>
4 <BreadcrumbItem>Variant</BreadcrumbItem>
5</Breadcrumbs>
6
7// Solid
8<Breadcrumbs variant="solid" color="primary" radius="md">
9 <BreadcrumbItem>Solid</BreadcrumbItem>
10 <BreadcrumbItem>Primary</BreadcrumbItem>
11</Breadcrumbs>
12
13// Bordered
14<Breadcrumbs variant="bordered" color="secondary" radius="lg">
15 <BreadcrumbItem>Bordered</BreadcrumbItem>
16 <BreadcrumbItem>Secondary</BreadcrumbItem>
17</Breadcrumbs>Sizes
Adjust the size of breadcrumb items using the size prop. Available sizes are sm, md (default), and lg.
index.tsx
1<Breadcrumbs size="sm">
2 <BreadcrumbItem>Small</BreadcrumbItem>
3 <BreadcrumbItem>Size</BreadcrumbItem>
4</Breadcrumbs>
5
6<Breadcrumbs size="md">
7 <BreadcrumbItem>Medium</BreadcrumbItem>
8 <BreadcrumbItem>Size</BreadcrumbItem>
9</Breadcrumbs>
10
11<Breadcrumbs size="lg">
12 <BreadcrumbItem>Large</BreadcrumbItem>
13 <BreadcrumbItem>Size</BreadcrumbItem>
14</Breadcrumbs>Collapsing Items
When there are many breadcrumb items, you can use maxItems to collapse intermediate items into an ellipsis (...). Control the number of visible items before and after the ellipsis with itemsBeforeCollapse and itemsAfterCollapse.
index.tsx
1<Breadcrumbs maxItems={3} itemsBeforeCollapse={1} itemsAfterCollapse={1}>
2 <BreadcrumbItem href="/section1">Section 1</BreadcrumbItem>
3 <BreadcrumbItem href="/section2">Section 2</BreadcrumbItem>
4 <BreadcrumbItem href="/section3">Section 3</BreadcrumbItem>
5 <BreadcrumbItem href="/section4">Section 4</BreadcrumbItem>
6 <BreadcrumbItem href="/section5" isCurrent>Section 5</BreadcrumbItem>
7</Breadcrumbs>Custom Separators
Provide a custom separator globally via the separator prop on Breadcrumbs, or for individual items using the separator prop on BreadcrumbItem.
index.tsx
1<Breadcrumbs separator={<Icon name="arrow-forward-ios" size={12} color="gray" />}>
2 <BreadcrumbItem href="/path1">Path One</BreadcrumbItem>
3 <BreadcrumbItem href="/path2">Path Two</BreadcrumbItem>
4 <BreadcrumbItem isCurrent>Current Page</BreadcrumbItem>
5</Breadcrumbs>
6
7// Item-specific separator
8<Breadcrumbs>
9 <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
10 <BreadcrumbItem href="/components" separator={<Text style={{marginHorizontal: 4}}>→</Text>}>
11 Components
12 </BreadcrumbItem>
13 <BreadcrumbItem isCurrent>Breadcrumbs</BreadcrumbItem>
14</Breadcrumbs>Props Overview
Breadcrumbs Props
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
children | ReactElement<BreadcrumbItemProps>[] | - | The breadcrumb items. |
variant | 'solid' | 'bordered' | 'light' | 'light' | Visual style. |
color | Theme color key | 'foreground' | Color theme. |
size | 'sm' | 'md' | 'lg' | 'md' | Size of items. |
radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' | Container border radius for solid/bordered variants. |
underline | 'none' | 'hover' | 'active' | 'always' | 'hover' | Underline style. |
separator | ReactNode | Chevron Icon | Custom global separator. |
maxItems | number | - | Max items before collapsing. |
itemsBeforeCollapse | number | 1 | Items before ellipsis. |
itemsAfterCollapse | number | 1 | Items after ellipsis. |
hideSeparator | boolean | false | Hide all separators. |
isDisabled | boolean | false | Disable all items (except current). |
itemStyle | BreadcrumbItemSlotsStyles | - | Global styles for item slots. |
styles | BreadcrumbsSlotsStyles | - | Styles for container slots (base, list, ellipsis). |
style | StyleProp<ViewStyle> | - | Style for the outer container. |
BreadcrumbItem Props
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
children | ReactNode | - | Content of the item. |
color, size, underline | various | Inherited | Overrides parent settings. |
startContent, endContent | ReactNode | - | Content at start/end. |
separator | ReactNode | Inherited | Item-specific separator. |
isCurrent | boolean | false | Marks item as current page. |
isLast | boolean | Injected | (Injected by Breadcrumbs) Marks item as last. |
hideSeparator | boolean | false | Hides separator after this item. |
disabled | boolean | false | Disables the item. |
itemStyles | BreadcrumbItemSlotsStyles | - | Styles for this item's slots. |
style | StyleProp<ViewStyle> | - | Style for the Pressable wrapper. |
onPress | (event) => void | - | Handler for press events. |
...PressableProps | various | - | Other props from React Native's Pressable. |
Styling
Customize the appearance using:
styleprop onBreadcrumbsfor the outer container.stylesprop onBreadcrumbsfor internal slots likebase,list, andellipsis.itemStyleprop onBreadcrumbsfor global styling of all item slots.itemStylesprop onBreadcrumbItemfor specific item slot styling.styleprop onBreadcrumbItemfor the Pressable wrapper.
index.tsx
1<Breadcrumbs
2 style={{ marginVertical: 10 }} // Style for the outer container
3 styles={{
4 base: { padding: 8, backgroundColor: '#f0f0f0' }, // Style for the main list container
5 list: { justifyContent: 'center' },
6 ellipsis: { fontWeight: 'bold' }
7 }}
8 itemStyle={{ // Global styles for all items
9 base: { marginHorizontal: 2 },
10 content: { fontFamily: 'Arial' }
11 }}
12>
13 <BreadcrumbItem
14 itemStyles={{ // Specific styles for this item
15 base: { backgroundColor: 'lightblue' },
16 content: { color: 'darkblue', fontWeight: 'bold' },
17 startContent: { marginRight: 8 }
18 }}
19 startContent={<Icon name="star" size={16} />}
20 >
21 Styled Item
22 </BreadcrumbItem>
23 <BreadcrumbItem>Another Item</BreadcrumbItem>
24</Breadcrumbs>Accessibility
The Breadcrumbs component has accessibilityRole="menubar". Each interactive BreadcrumbItem has accessibilityRole="link" and appropriate accessibilityState (disabled, selected).