Navbar
The Bootstrap
navbar
component, implemented in Ruby. Use it like any other matestack component in your apps, pages and components. It offers customizable options to simply achieve what is possible in bootstrap with this component. See below for more information about the possible options.Returns a bootstrap navbar. This component can handle various optional configuration params and can either display additional content specified by a block or display what ever gets passes to the
slots
configuration paramsOptional options
:items
- Expects an array of Hashes. Each hash object should contain at least these keys:type
,path
,text
.type
: can be either:transition
,:link
oraction
.- default is
:transition
. - With transition, active class will be handle automatically.
path
&text
: expect a stringicon
: name of icon which should prepend the optinally given text
:items_class
- You can add here additional class for navbar-nav list- By default the list is set to be on the left of the navbar and align at the center when it collapsed =
me-auto mb-2 mb-lg-0
:brand
- expect hash or string. Possible keys for hash:text
,path
,img
andtype
.- If the argument for brand is a string, navbar will display the given string as Brand text and a transition to the root_path
- Default
type
istransition
, you can specify to use alink
instead using thetype
:toggle
- expect hash or a symbol (:left
or:right
). This parameter determines whether the expand navigation toggle button should be on the left or right- possible keys for hash:
position
,class
. Withclass
you can pass on additional class for toggle button
:theme
&:color
- Specify a theme for navbar. Theme represent bootstraps contextual classes and can have one of the following values::primary, :secondary, :success, :info, :warning, :info, :light, :dark
or your custom contextual class. Point of attention: If color parameter is not set, the color will be the same as theme:fixed_top
,:fixed_bottom
,:sticky_top
- Expectstrue
. By setting this parameter totrue
the related functionality will be activated. If not set, it will simple keep deactivated and you don't have to do anything in addition:expand_at
- set at which screen size the navbar should be expanded- Expects a breakpoints
:xs, :sm, :md, :lg, :xl, :xxl
. - By default it's set as
:lg
:container_size
- The container inside the navbar is set as:fluid
by default and can be set with any bootstrap breakpointsslots
- Expects a Hash with the keycustom_items
This option allows for more customization. Point of attention: All the options/parameters fortoggle
,brand
anditems
will be invaled by using this slots options- Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding navbar div.
bs_navbar theme: :light, brand: "Navbar", items: [
{ path: "#", text: "Home" },
{ path: "#", text: "Link" }
]
returns
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
# adding custom class to nav class attribute: "text-center"
bs_navbar theme: :light, brand: "Navbar", class: "text-center", items: [
{ path: "#", text: "Home"},
{ path: "#", text: "Contact"} ] do
bs_btn "Login", variant: :outline_success, horizontal: :end
end
returns
<nav class="navbar navbar-expand-lg navbar-light bg-light text-center">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<button class="btn btn-outline-success justify-content-end" type="button">Login</button>
</div>
</div>
</nav>
This configuration allows customization inside the navbar container
bs_navbar slots: { custom_items: method(:my_navbar) }, color: :primary, theme: :dark
def my_navbar
span "Navbar text with an inline element", class: "navbar-text"
end
returns
<nav class="navbar navbar-dard bg-primary">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Using the same navbar as example 3 but adding
sticky-top
option. fixed-botton
and sticky-top
can be added in similar way.bs_navbar slots: { custom_items: method(:my_navbar) }, color: :primary, theme: :dark, stick_top: true
def my_navbar
span "Navbar text with an inline element", class: "navbar-text"
end
returns
<nav class="navbar navbar-dark bg-primary sticky-top">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Last modified 1yr ago