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.
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
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: "mr-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-toggle="collapse" data-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-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>
ui_navbar title: "Navbar" do |nb|
nb.nav class: "mr-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-toggle="collapse" data-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-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 has several block type:
Navbar has several block type:
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-toggle="collapse" data-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-toggle="collapse" data-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-toggle="collapse" data-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>
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: "mr-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