Ui.Breadcrumbs

Indicate the current page’s location within a navigational hierarchy that automatically adds separators.

Interactive Demo

You can play around with a Ui.Breadcrumbs below using the controls.

Size (16px)
Separator
<Ui.Breadcrumbs
size={Ui.Size.Px(16)}
separator=<{ "/" }>
items=[
{"/", <>"Home"</>},
{"/components", <>"Components"</>},
{"", <>"Ui.BreadCrumbs"</>}
]/>
Separator

The separator can be changed using the separator property.

<Ui.Breadcrumbs
separator=<>"»"</>
items=[
{"/", <>"Home"</>},
{"/components", <>"Components"</>},
{"", <>"Ui.Breadcrumbs"</>}
]
/>
Size

The size of the component can be set with the size property.

<>
<Ui.Breadcrumbs
size={Ui.Size.Px(12)}
items=[{"/", <>"Home"</>}, {"/components", <>"Components"</>}]
/>
<Ui.Breadcrumbs
size={Ui.Size.Px(16)}
items=[{"/", <>"Home"</>}, {"/components", <>"Components"</>}]
/>
<Ui.Breadcrumbs
size={Ui.Size.Px(20)}
items=[{"/", <>"Home"</>}, {"/components", <>"Components"</>}]
/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.