Navbar(ui_navbar)Bootstrap Logo

UiBibz::Ui::Core::Navigations::Navbar

Navbar is a responsive meta component that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

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

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

  n.form url, options, html_options do
    content
  end

  nb.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)
  • collapsible[boolean]turn on/off the responsive collapsing
  • container[hash]same options like container
  • container_html[hash]html options for container
  • controller[string](use component stimulus-options method)
  • expand_size[symbol](:sm, :md, :lg, :xl, :xxl)size which you want expand the navbar
  • position[symbol](:top, :bottom)
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • sticky[boolean](true, false)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • type[symbol](:light, :dark)

Items

The allowed items for this component are:
  • brand(inherit of component)
  • form
    • type[symbol](:form_for, :ui_form_for, :form_tag)<default: :form_tag>
  • html[html/string]Insert html as a component
  • nav(inherit of nav)
  • navbar_toggle_html(inherit of component)
  • spacer[integer](nil, 1, 2, 3, 4, 5, 6)
  • text(inherit of component)

Examples

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

Navbar

ui_navbar title: 'Navbar' do |nb|
  nb.nav do |n|
    n.link "Home", url: "#active", state: :active
    n.link url: "#link", class: "my-link" do
      Features
    end
    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
  end
  nb.form "/search", { type: :form_tag, position: :right } do
    ui_text_field "Search", class: "me-sm-2"
    ui_button "Search", status: :success, outline: true
  end
end

<nav class="navbar navbar-light">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggler hidden-sm-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-192277148643299499256799640337178773539">☰</button>
    </div>
    <div class="collapse navbar-toggleable-xs" id="navbar-collapse-192277148643299499256799640337178773539">
    <a class="navbar-brand" href="/">Navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="active nav-link" href="#active">Home</a></li>
      <li class="my-link nav-item"><a class="my-link nav-link" href="#link">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#another-link">Pricing</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>
    </ul>
    <form class="navbar-form form-inline pull-right" action="/search" accept-charset="UTF-8" method="post">
      <input name="utf8" type="hidden" value="✓">
    </form>
    </div>
  </div>
</nav>

Navbar justified

ui_navbar title: "Navbar" do |nb|
  nb.nav class: "me-auto" do |n|
    n.link "Home", url: "#active", state: :active
    n.link url: "#link", class: "my-link" do
      Features
    end
  end
  nb.spacer
  nb.nav do |n|
    n.link "Right link", url: "#right-link"
    n.dropdown "Dropdown", glyph: "user" 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
  end
end

<nav class="navbar navbar-light">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggler hidden-sm-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-192277148643299499256799640337178773539">☰</button>
    </div>
    <div class="collapse navbar-toggleable-xs" id="navbar-collapse-192277148643299499256799640337178773539">
    <a class="navbar-brand" href="/">Navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="active nav-link" href="#active">Home</a></li>
      <li class="my-link nav-item"><a class="my-link nav-link" href="#link">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#another-link">Pricing</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>
    </ul>
    <form class="navbar-form form-inline pull-right" action="/search" accept-charset="UTF-8" method="post">
      <input name="utf8" type="hidden" value="✓">
    </form>
    </div>
  </div>
</nav>

Navbar Options

Navbar has several block type:

  • brand (inherit of component)
  • dropdown (inherit of dropdown)
  • form
    • type[symbol](:form_for, :ui_form_for, :form_tag)<default: :form_tag>
  • nav (inherit of nav)

Navbar has several block type:

Color



ui_navbar title: "Navbar", status: :primary, type: :dark do |nb|
  nb.nav do |n|
    n.link "Home", url: "#home"
  end
end
 
ui_navbar title: "Navbar", status: :dark, type: :dark do |nb|
  nb.nav do |n|
    n.link "Home", url: "#home"
  end
end
 
ui_navbar({ title: "Navbar" }, { style: "background-color: #e3f2fd;"}) do |nb|
  nb.nav do |n|
    n.link "Home", url: "#home"
  end
end

<nav class="bg-primary navbar navbar-dark">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggler hidden-sm-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-160158161299155119273254548163830267681">☰</button>
    </div>
    <div class="collapse navbar-toggleable-xs" id="navbar-collapse-160158161299155119273254548163830267681">
    <a class="navbar-brand" href="/">Navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
    </ul>
    </div>
  </div>
</nav>
<br>
<nav class="bg-inverse navbar navbar-dark">
  <div class="container-fluid">
    <div class="navbar-header">
    <button class="navbar-toggler hidden-sm-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-214411906184242794016651883035508354854">☰</button>
    </div>
    <div class="collapse navbar-toggleable-xs" id="navbar-collapse-214411906184242794016651883035508354854">
    <a class="navbar-brand" href="/">Navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
    </ul>
    </div>
  </div>
</nav>
<br>
<nav style="background-color: #e3f2fd;" class="navbar navbar-light">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggler hidden-sm-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-207260865260885193538102279947196808493">☰</button>
    </div>
    <div class="collapse navbar-toggleable-xs" id="navbar-collapse-207260865260885193538102279947196808493">
    <a class="navbar-brand" href="/">Navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
    </ul>
    </div>
  </div>
</nav>

Simple form

ui_navbar type: :dark, status: :dark do |nb|
  nb.brand image_tag "ruby-white.png"
  nb.nav do |n|
    n.link "Link", url: "#link"
  end
  nb.form @user, { type: :ui_form_for, url: components_navigations_navbar_path, method: "get", input_html: { class: "me-sm-2" }} do |f|
    = f.input :country_id, as: :ui_select_field, label: false, collection: Country.all
    = f.ui_surround_field do |s|
      s.glyph "user"
      s.input :name, as: :ui_text_field, label: false
      s.input :company, as: :ui_dropdown_select_field, label: false, collection: Continent.all
    end
    = f.submit "Go", class: "btn btn-primary btn-outline-primary"
  end
end