Nav(ui_nav)

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]
  • options[hash]<default: {}>
  • html_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:
  • state[symbol](:disabled, :active)(use component state method)
  • type[symbol](:tabs, :pills, :links)
  • position[symbol](:left, :center, :right)
  • stacked[boolean]
  • justify[boolean]
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Items

The allowed items for this component are:

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:

  • link (inherit of component)
    • urlRequired
    • state[symbol](:disabled, :active)(use component state method)
  • dropdown (inherit of dropdown)
  • 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-toggle="tab" role="tab" href="#active">Active</a></li>
  <li class="dropdown nav-item">
    <a class="dropdown-toggle nav-link" data-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-toggle="tab" role="tab" href="#another-link">Another link</a></li>
  <li class="nav-item"><a class="disabled nav-link" data-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-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

  • Active
  • Link
  • Another link
  • Disabled
    • 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>

    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-toggle="tab" role="tab" href="#content1">Active</a></li>
  <li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#content2">Link</a></li>
  <li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#content3">Another link</a></li>
  <li class="nav-item"><a class="disabled nav-link" data-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>

    Contents