3.1
Getting Started
API
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.bs_navbar(*args, &block)
bs_navbar(*args, &block)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,:linkoraction.- 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,imgandtype.- 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
typeistransition, you can specify to use alinkinstead using thetype
:toggle- expect hash or a symbol (:leftor:right). This parameter determines whether the expand navigation toggle button should be on the left or right- possible keys for hash:
position,class. Withclassyou 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, :darkor 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 totruethe 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:fluidby default and can be set with any bootstrap breakpointsslots- Expects a Hash with the keycustom_itemsThis option allows for more customization. Point of attention: All the options/parameters fortoggle,brandanditemswill 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.
Examples
Example 1: Basic navbar with collapse functionality
1
bs_navbar theme: :light, brand: "Navbar", items: [
2
{ path: "#", text: "Home" },
3
{ path: "#", text: "Link" }
4
]
Copied!
returns
1
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2
<div class="container-fluid">
3
<a class="navbar-brand" href="/">Navbar</a>
4
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
5
<span class="navbar-toggler-icon"></span>
6
</button>
7
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
8
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
9
<li class="nav-item">
10
<a class="nav-link active" aria-current="page" href="#">Home</a>
11
</li>
12
<li class="nav-item">
13
<a class="nav-link" href="#">Link</a>
14
</li>
15
</ul>
16
</div>
17
</div>
18
</nav>
Copied!
Example 2: Yield a given block
1
# adding custom class to nav class attribute: "text-center"
2
bs_navbar theme: :light, brand: "Navbar", class: "text-center", items: [
3
{ path: "#", text: "Home"},
4
{ path: "#", text: "Contact"} ] do
5
bs_btn "Login", variant: :outline_success, horizontal: :end
6
end
Copied!
returns
1
<nav class="navbar navbar-expand-lg navbar-light bg-light text-center">
2
<div class="container-fluid">
3
<a class="navbar-brand" href="#">Navbar</a>
4
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
5
<span class="navbar-toggler-icon"></span>
6
</button>
7
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
8
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
9
<li class="nav-item">
10
<a class="nav-link active" aria-current="page" href="#">Home</a>
11
</li>
12
<li class="nav-item">
13
<a class="nav-link" href="#">Link</a>
14
</li>
15
</ul>
16
<button class="btn btn-outline-success justify-content-end" type="button">Login</button>
17
</div>
18
</div>
19
</nav>
Copied!
Example 3: Using slots configuration
This configuration allows customization inside the navbar container
1
bs_navbar slots: { custom_items: method(:my_navbar) }, color: :primary, theme: :dark
2
​
3
def my_navbar
4
span "Navbar text with an inline element", class: "navbar-text"
5
end
Copied!
returns
1
<nav class="navbar navbar-dard bg-primary">
2
<div class="container-fluid">
3
<span class="navbar-text">
4
Navbar text with an inline element
5
</span>
6
</div>
7
</nav>
Copied!
Example 4: Render options fixed-top, fixed-bottom, sticky-top
Using the same navbar as example 3 but adding
sticky-top option. fixed-botton and sticky-top can be added in similar way.1
bs_navbar slots: { custom_items: method(:my_navbar) }, color: :primary, theme: :dark, stick_top: true
2
​
3
def my_navbar
4
span "Navbar text with an inline element", class: "navbar-text"
5
end
Copied!
returns
1
<nav class="navbar navbar-dark bg-primary sticky-top">
2
<div class="container-fluid">
3
<span class="navbar-text">
4
Navbar text with an inline element
5
</span>
6
</div>
7
</nav>
Copied!
Last modified 4mo ago