View Source Shino.UI.Breadcrumb (shino v0.2.0-alpha.1)

Provides breadcrumb related components.

Displays the path to the current resource using a hierarchy of links.

Examples

Basic

<Breadcrumb.root>
  <Breadcrumb.list>
    <Breadcrumb.item>
      <Breadcrumb.anchor href="/">Home</Breadcrumb.anchor>
    </Breadcrumb.item>
    <Breadcrumb.sep />
    <Breadcrumb.item>
      <Breadcrumb.ellipsis />
    </Breadcrumb.item>
    <Breadcrumb.sep />
    <Breadcrumb.item>
      <Breadcrumb.anchor href="/components">Components</Breadcrumb.anchor>
    </Breadcrumb.item>
    <Breadcrumb.sep />
    <Breadcrumb.item>
      <Breadcrumb.page>Breadcrumb</Breadcrumb.page>
    </Breadcrumb.item>
  </Breadcrumb.list>
</Breadcrumb.root>

Collapsed

Use <Breadcrumb.ellipsis /> component to show a collapsed state when the breadcrumb is too long.

<Breadcrumb.root>
  <Breadcrumb.list>
    <% # ... %>
    <Breadcrumb.item>
      <Breadcrumb.ellipsis />
    </Breadcrumb.item>
    <% # ... %>
  </Breadcrumb.list>
</Breadcrumb.root>

References

Summary

Functions

Renders a breadcrumb link.

Renders a breadcrumb ellipsis.

Renders a breadcrumb item.

Renders a breadcrumb list.

Renders a breadcrumb page which indicates the page that user visits currently.

The root contains all the parts of a breadcrumb.

Renders a breadcrumb separator.

Functions

Renders a breadcrumb link.

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method"].

Slots

  • inner_block (required)

Renders a breadcrumb ellipsis.

Customization

To create a custom ellipsis, put the custom content to the :inner_block slot:

<Breadcrumb.ellipsis>
  <% # custom content %>
</Breadcrumb.ellipsis>

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

Renders a breadcrumb item.

In theory, you can put anything into a breadcrumb item, such as:

  • a link
  • a dropdown menu
  • ...

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a breadcrumb list.

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a breadcrumb page which indicates the page that user visits currently.

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

The root contains all the parts of a breadcrumb.

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

See Shino.UI.Breadcrumb.separator/1.

Renders a breadcrumb separator.

Customization

To create a custom separator, put the custom content to the :inner_block slot:

<Breadcrumb.separator>
  <% # custom content %>
</Breadcrumb.separator>

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block