View Source BitstylesPhoenix.Component.Breadcrumbs (bitstyles_phoenix v2.3.1)
The Breadcrumbs component.
Summary
Functions
Render breadcrumbs (usually links) to reflect the page structure.
Functions
Render breadcrumbs (usually links) to reflect the page structure.
Attributes
icon_file
- The external SVG file with icons to be passed on toBitstylesPhoenix.Component.Icon.ui_icon/1
for the breadcrumb icon. Only needed if SVG icons are not provided inline on the HTML.class
- Extra classes to pass to theul
tag. SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed to the
nav
tag.
Attributes - item
slot
class
- Extra classes to pass to theli
tag. SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed to the
li
tag.
See bitstyles breadcrumbs docs for examples.
Breadcrumbs
iex> assigns = %{}
...> render ~H"""
...> <.ui_breadcrumbs>
...> <:item>Foo</:item>
...> <:item>Bar</:item>
...> <:item>Baz</:item>
...> </.ui_breadcrumbs>
...> """
"""
<nav aria-label="breadcrumbs">
<ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center">
<li class="u-margin-xs-right u-flex u-items-center">
Foo
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
<li class="u-margin-xs-right u-flex u-items-center">
Bar
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
<li class="u-margin-xs-right u-flex u-items-center">
Baz
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
</ol>
</nav>
"""
Requires additional content on the page:
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
<symbol id="icon-caret-right" viewBox="0 0 100 100">
<path d="M34.23,93.36a5.57,5.57,0,0,1-7.89-7.87L61.91,50.08,26.34,14.51a5.57,5.57,0,0,1,7.89-7.87L73.66,46.06a5.58,5.58,0,0,1,0,7.88Z" fill-rule="evenodd"/>
</symbol>
</svg>
Breadcrumbs via array
iex> assigns = %{}
...> render ~H"""
...> <.ui_breadcrumbs items={["Foo", "Bar", "Baz"]} />
...> """
"""
<nav aria-label="breadcrumbs">
<ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center">
<li class="u-margin-xs-right u-flex u-items-center">
Foo
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
<li class="u-margin-xs-right u-flex u-items-center">
Bar
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
<li class="u-margin-xs-right u-flex u-items-center">
Baz
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
</ol>
</nav>
"""
Requires additional content on the page:
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
<symbol id="icon-caret-right" viewBox="0 0 100 100">
<path d="M34.23,93.36a5.57,5.57,0,0,1-7.89-7.87L61.91,50.08,26.34,14.51a5.57,5.57,0,0,1,7.89-7.87L73.66,46.06a5.58,5.58,0,0,1,0,7.88Z" fill-rule="evenodd"/>
</symbol>
</svg>
Breadcrumbs with custom classes and properties
iex> assigns = %{}
...> render ~H"""
...> <.ui_breadcrumbs class="u-fg-warning" data-foo="bar">
...> <:item class="u-fg-brand-2" data-baz="foo">Foo</:item>
...> <:item>Bar</:item>
...> <:item>Baz</:item>
...> </.ui_breadcrumbs>
...> """
"""
<nav aria-label="breadcrumbs" data-foo="bar">
<ol class="u-h6 a-list-reset u-flex u-flex-wrap u-items-center u-fg-warning">
<li class="u-margin-xs-right u-flex u-items-center u-fg-brand-2" data-baz="foo">
Foo
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
<li class="u-margin-xs-right u-flex u-items-center">
Bar
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
<li class="u-margin-xs-right u-flex u-items-center">
Baz
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
<use xlink:href="#icon-caret-right">
</use>
</svg>
</li>
</ol>
</nav>
"""
Requires additional content on the page:
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
<symbol id="icon-caret-right" viewBox="0 0 100 100">
<path d="M34.23,93.36a5.57,5.57,0,0,1-7.89-7.87L61.91,50.08,26.34,14.51a5.57,5.57,0,0,1,7.89-7.87L73.66,46.06a5.58,5.58,0,0,1,0,7.88Z" fill-rule="evenodd"/>
</symbol>
</svg>