Nav(ui_nav)Bootstrap Logo

UiBibz::Ui::Core::Navigations::Nav

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states.

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_nav options, html_options do |n|
  # by variable
  n.link content, options, html_options
  # or by block
  n.link options, html_options do
    content
  end

  n.nav do |na|
    na.link content, options, html_options
  end

  n.dropdown name, options, html_options do |d|
    d.link content, options, html_options
  end
end

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)
  • justify[boolean]
  • position[symbol](:left, :center, :right)
  • stacked[boolean]
  • state[symbol](:disabled, :active)(use component state method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • type[symbol](:tabs, :pills, :links)

Items

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

Examples

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

Nav

ui_nav do |n|
  n.link "Active", url: "#active", state: :active
  n.link({ url: "#link" }, { class: "my-link"}) do
    "Link"
  end
  n.nav do |na|
    na.link "Another link", url: "#another-link"
    na.link "Disabled", url: "#disabled", state: :disabled
  end
  n.link "Another link 2", url: "#another-link2"
  n.link "Another link 3", url: "#another-link3"
end

<ul class="nav">
  <li class="nav-item"><a class="active nav-link" href="#active">Active</a></li>
  <li class="my-link nav-item"><a class="my-link nav-link" href="#link">Link</a></li>
  <li class="nav-item">
    <ul class="nav">
      <li class="nav-item"><a class="nav-link" href="#another-link">Another link</a></li>
      <li class="nav-item"><a class="disabled nav-link" href="#disabled">Disabled</a></li>
    </ul>
  </li>
  <li class="nav-item"><a class="nav-link" href="#another-link2">Another link 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#another-link3">Another link 3</a></li>
</ul>

Nav blocks

Nav has several block type:

  • dropdown (inherit of dropdown)
  • html[html/string]Insert html as a component
  • link (inherit of component)
    • a_html[hash]Html attributes for the a tag
    • html[html/string]Insert html as a component
    • state[symbol](:disabled, :active)(use component state method)
    • urlRequired
  • nav (inherit of nav)

Link

ui_nav type: :links do |n|
  n.link "Active", url: "#active", state: :active
  n.link({ url: "#link" }, { class: "my-link"}) do
    "Link"
  end
  n.link "Another link", url: "#another-link"
  n.link "Disabled", url: "#disabled", state: :disabled
end

<nav class="nav nav-links">
  <a class="active nav-link" href="#active">Active</a>
  <a class="my-link nav-link" href="#link">Link</a>
  <a class="nav-link" href="#another-link">Another link</a>
  <a class="disabled nav-link" href="#disabled">Disabled</a>
</nav>

Position

ui_nav type: :links, position: :right do |n|
  n.link "Active", url: "#active", state: :active
  n.link "Another link", url: "#another-link"
  n.link "Disabled", url: "#disabled", state: :disabled
end

ui_nav type: :links, position: :center do |n|
  n.link "Active", url: "#active", state: :active
  n.link "Another link", url: "#another-link"
  n.link "Disabled", url: "#disabled", state: :disabled
end

ui_nav type: :links do |n|
  n.link "Active", url: "#active", state: :active
  n.link "Another link", url: "#another-link"
  n.link "Disabled", url: "#disabled", state: :disabled
end

<nav class="nav nav-links justify-content-end">
  <a class="active nav-link" href="#active">Active</a>
  <a class="nav-link" href="#another-link">Another link</a>
  <a class="disabled nav-link" href="#disabled">Disabled</a>
</nav>

<nav class="nav nav-links justify-content-center">
  <a class="active nav-link" href="#active">Active</a>
  <a class="nav-link" href="#another-link">Another link</a>
  <a class="disabled nav-link" href="#disabled">Disabled</a>
</nav>

<nav class="nav nav-links">
  <a class="active nav-link" href="#active">Active</a>
  <a class="nav-link" href="#another-link">Another link</a>
  <a class="disabled nav-link" href="#disabled">Disabled</a>
</nav>

Tab

ui_nav type: :tabs do |n|
  n.link "Active", url: "#active", state: :active
  n.dropdown "Dropdown" do |d|
    d.link "Action 1", url: "#action"
    d.link url: "#another-action" do
      "Action 2"
    end
    d.link({ url: "#separate-link"}, { class: "my-link"}) do
      "Action 3"
    end
  end
  n.link "Link", url: "#link"
  n.link "Another link", url: "#another-link"
  n.link "Disabled", url: "#disabled", state: :disabled
end

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link" data-bs-toggle="tab" role="tab" href="#active">Active</a></li>
  <li class="dropdown nav-item">
    <a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
    <div class="dropdown-menu dropdown-menu-left">
      <a class="dropdown-item" href="#action">Action 1</a>
      <a class="dropdown-item" href="#another-action">Action 2</a>
      <a class="my-link dropdown-item" href="#separate-link">Action 3</a>
    </div>
  </li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#another-link">Another link</a></li>
  <li class="nav-item"><a class="disabled nav-link" data-bs-toggle="tab" role="tab" href="#disabled">Disabled</a></li>
</ul>

Pill

ui_nav type: :pills do |n|
  n.link "Active", url: "#active", state: :active
  n.dropdown "Dropdown" do |d|
    d.link "Action 1", url: "#action"
    d.link url: "#another-action" do
      "Action 2"
    end
    d.link({ url: "#separate-link"}, { class: "my-link"}) do
      "Action 3"
    end
  end
  n.link "Another link", url: "#another-link"
  n.link "Disabled", url: "#disabled", state: :disabled
end

<ul class="nav nav-pills">
  <li class="nav-item"><a class="active nav-link" href="#active">Active</a></li>
  <li class="dropdown nav-item">
    <a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
    <div class="dropdown-menu dropdown-menu-left">
      <a class="dropdown-item" href="#action">Action 1</a>
      <a class="dropdown-item" href="#another-action">Action 2</a>
      <a class="my-link dropdown-item" href="#separate-link">Action 3</a>
    </div>
  </li>
  <li class="nav-item"><a class="nav-link" href="#another-link">Another link</a></li>
  <li class="nav-item"><a class="disabled nav-link" href="#disabled">Disabled</a></li>
</ul>

Justified

ui_nav type: :pills, justify: true do |n|
  n.link 'Active', url: '#active', state: :active
  n.link 'Another link', url: '#another-link'
  n.link 'Disabled', url: '#disabled', state: :disabled
end

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="active nav-link" href="#active">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#another-link">Another link</a>
  </li>
  <li class="nav-item">
    <a class="disabled nav-link" href="#disabled">Disabled</a>
  </li>
</ul>

Stacked pill

ui_nav type: :pills, stacked: true do |n|
  n.link "Active", url: "#active", state: :active
  n.link "Link", url: "#link"
  n.link "Another link", url: "#another-link"
  n.link "Disabled", url: "#disabled", state: :disabled
end

<ul class="nav nav-pills nav-stacked">
  <li class="nav-item"><a class="active ui_nav-link" href="#active">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#link">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#another-link">Another link</a></li>
  <li class="nav-item"><a class="disabled nav-link" href="#disabled">Disabled</a></li>
</ul>

Underline

ui_nav underline: true do |n|
  n.link "Active", url: "#active", state: :active
  n.link "Link", url: "#link"
  n.link "Another link", url: "#another-link"
  n.link "Disabled", url: "#disabled", state: :disabled
end

<ul class="nav nav-underline">
  <li class="nav-item"><a class="active ui_nav-link" href="#active">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#link">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#another-link">Another link</a></li>
  <li class="nav-item"><a class="disabled nav-link" href="#disabled">Disabled</a></li>
</ul>

Connection

For more information see: Boostrap nav


Content 1
Content 2
Content 3
Content 4
ui_nav type: :tabs do |n|
  n.link "Active", url: "#content1", state: :active
  n.link "Link", url: "#content2"
  n.link "Another link", url: "#content3"
  n.link "Disabled", url: "#content4", state: :disabled
end
 
<div class='tab-content'>
  ui_card 'Content 1', { tab: true, state: :active }, { id: 'content1' }
  ui_card 'Content 2', { tab: true, effect: :fade }, { id: 'content2' }
  ui_card 'Content 3', { tab: true, effect: :fade }, { id: 'content3' }
  ui_card 'Content 4', { tab: true }, { id: 'content4' }
</div>

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link" data-bs-toggle="tab" role="tab" href="#content1">Active</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#content2">Link</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#content3">Another link</a></li>
  <li class="nav-item"><a class="disabled nav-link" data-bs-toggle="tab" role="tab" href="#content4">Disabled</a></li>
</ul>
<br>
<div class="tab-content">
  <div id="content1" class="active card card-block tab-pane">Content 1</div>
  <div id="content2" class="fade card card-block tab-pane">Content 2</div>
  <div id="content3" class="fade card card-block tab-pane">Content 3</div>
  <div id="content4" class="card card-block tab-pane">Content 4</div>
</div>

List

Content 1Content 2Content 3Content 4

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

ui_row do
  ui_col do
    ui_nav type: :list do |n|
      n.link 'Content 1', url: '#content-1', state: :active
      n.link 'Content 2', url: '#content-2'
      n.link 'Content 3', url: '#content-3'
      n.link 'Content 4', url: '#content-4'
    end
  end
  ui_col class: "tab-content" do
    ui_card({ tab: true, state: :active }, { id: 'content-1' }) do
      <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
    end
    ui_card({ tab: true, effect: :fade }, { id: 'content-2' }) do
      <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
    end
    ...
  end

<div class="row">
  <div class="col">
    <div class="list-group" role="tablist">
      <a class="list-group-item list-group-item-action active" data-bs-toggle="tab" role="tab" aria-controls="Content 1" href="#content-1" aria-selected="true">Content 1</a>
      <a class="list-group-item list-group-item-action" data-bs-toggle="tab" role="tab" aria-controls="Content 2" href="#content-2" aria-selected="false">Content 2</a>
      <a class="list-group-item list-group-item-action" data-bs-toggle="tab" role="tab" aria-controls="Content 3" href="#content-3" aria-selected="false">Content 3</a>
      <a class="list-group-item list-group-item-action" data-bs-toggle="tab" role="tab" aria-controls="Content 4" href="#content-4" aria-selected="false">Content 4</a>
      </div>
  </div>
  <div class="tab-content col">
    <div id="content-1" class="card tab-pane active">
      <div class="card-body">
        <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
      </div>
    </div>
    <div id="content-2" class="fade card tab-pane">
      <div class="card-body">
        <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
      </div>
    </div>
    <div id="content-3" class="fade card tab-pane">
      <div class="card-body">
        <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.</p>
      </div>
    </div>
    <div id="content-4" class="fade card tab-pane">
      <div class="card-body">
        <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</p>
      </div>
    </div>
  </div>
</div>