Breadcrumb(ui_breadcrumb)Bootstrap Logo

UiBibz::Ui::Core::Navigations::Breadcrumb

Indicate the current page's location within a navigational hierarchy.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

ui_breadcrumb options, html_options do |b|
  # by variable
  b.link content, options, html_options

  # or by block
  b.link options, html_options do
    content
  end
end

# or

ui_breadcrumb store, options, html_options

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • link_label[symbol](:name)
  • link_url[string](#)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Items

The allowed items for this component are:
  • html[html/string]Insert html as a component
  • link(inherit of link)

Examples

Some examples explain how to use the options present in the component.

Breadcrumb

ui_breadcrumb do |b|
  b.link "Home", current: true
end
 
ui_breadcrumb do |b|
  b.link "Home", url: "#home"
  b.link "Library", current: true
end
 
ui_breadcrumb divider: ">" do |b|
  b.link "Home", url: "#home"
  b.link "Library", url: "#library"
  b.link "Data", current: true
end

<nav arial-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="active breadcrumb-item" aria-current="page">Home</li>
  </ol>
</nav>

<nav arial-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#home">Home</a></li>
    <li class="active breadcrumb-item" aria-current="page">Library</li>
  </ol>
</nav>

<nav arial-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#active">Home</a></li>
    <li class="breadcrumb-item"><a href="#library">Library</a></li>
    <li class="active breadcrumb-item" aria-current="page">Data</li>
  </ol>
</nav>

Breadcrumb with store

Options are :

  • link_label[symbol/string]<default: :name>
  • link_url[string]<default: #>

Option link_url can be written:

  • "/user/:id"
  • user_path(:id)
ui_breadcrumb store: @users, link_label: :email, link_url: "\#/id/edit"

<ol class="breadcrumb">
  <li><a href="#/1/edit">test0@test.com</a></li>
  <li><a href="#/2/edit">test1@test.com</a></li>
  <li aria-current="page">test2@test.com</li>
</ol>
Documentation