Version: 3.0.0-next.36

Breadcrumb

Implements#

Import#

import { Breadcrumb } from 'nativebase';

Examples#

Basic#

Add isCurrentPage prop to the Breadcrumb.Item that matches the current path.

Icon Separators#

Change the separator used in the breadcrumb by passing a string, like '-' or any Component.

Text Separators#

Composition#

Breadcrumb composes Box so you can pass all Box props to change the style of the breadcrumbs. Let's say we need to increase the fontSize and change color of the breadcrumbs.

Props#

Breadcrumb#

NameTypeDescriptionDefault
separatorJSX.Element, stringThe visual separator between the breadcrumb item.-
spacingMarginPropsThe space between each stack item.-

Breadcrumb.Item#

NameTypeDescriptionDefault
isCurrentPagebooleanIf true, it indicates that the breadcrumb link is active page.-

Breadcrumb.Link#

Breadcrumb.Link composes the Link component so you can use all Link props.