BitstylesPhoenix.Component.Breadcrumbs (bitstyles_phoenix v2.3.0) View Source
The Breadcrumbs component.
Link to this section Summary
Functions
Render breadcrumbs (usually links) to reflect the page structure.
Link to this section 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>