<%= navbar header => ['The brand', ['#'], hamburger, toggler => 'bs-example-navbar-collapse-1'] %>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="collapsed navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">The brand</a>
</div>
</div>
</nav>
A simple navbar with a couple of links and a submenu:
<%= navbar header => ['The brand', ['#'], hamburger, toggler => 'bs-example-navbar-collapse-2'],
nav => [ items => [
['Link', ['#'] ],
['Another link', ['#'], active ],
['Menu', ['#'], caret, items => [
['Choice 1', ['#'] ],
['Choice 2', ['#'] ],
[],
['Choice 3', ['#'] ],
] ],
]
]
%>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="collapsed navbar-toggle" data-target="#bs-example-navbar-collapse-2" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">The brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li class="active"><a href="#">Another link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Choice 1</a></li>
<li><a href="#">Choice 2</a></li>
<li class="divider"></li>
<li><a href="#">Choice 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<%= navbar inverse, header => ['The Brand', ['#'], hamburger, toggler => 'collapse-45821'],
form => [
[['/login'], method => 'post', left],
[
formgroup => [
text_field => ['search-term', placeholder => 'Search' ],
],
submit_button => ['Submit'],
]
],
button => ['A link', ['#'], left ],
nav => [ items => [
['Another linkage', ['#'], -li => [ data => { stuff => 'inli' } ], data => { item => 1 } ]
]
],
p => ['Hello', right]
%>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button class="collapsed navbar-toggle" data-target="#collapse-45821" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">The Brand</a>
</div>
<div class="collapse navbar-collapse" id="collapse-45821">
<form action="/login" class="navbar-form navbar-left" method="post">
<div class="form-group">
<input class="form-control" id="search-term" name="search_term" placeholder="Search" type="text" />
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
<a class="btn btn-default navbar-btn navbar-left" href="#">A link</a>
<ul class="nav navbar-nav">
<li data-stuff="inli"><a href="#" data-item="1">Another linkage</a></li>
</ul>
<p class="navbar-right navbar-text">Hello</p>
</div>
</div>
</nav>
<%= navbar inverse, container => 'normal', header => ['The Brand', ['#'], hamburger, toggler => 'collapse-45821'],
form => [
[['/login'], method => 'post', left],
[
formgroup => [
text_field => ['search-term', placeholder => 'Search' ],
],
submit_button => ['Submit'],
]
],
button => ['A link', ['#'], left ],
nav => [ items => [
['Another linkage', ['#'], -li => [ data => { stuff => 'inli' } ], data => { item => 1 } ]
]
],
p => ['Hello', right]
%>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button class="collapsed navbar-toggle" data-target="#collapse-45821" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">The Brand</a>
</div>
<div class="collapse navbar-collapse" id="collapse-45821">
<form action="/login" class="navbar-form navbar-left" method="post">
<div class="form-group">
<input class="form-control" id="search-term" name="search_term" placeholder="Search" type="text" />
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
<a class="btn btn-default navbar-btn navbar-left" href="#">A link</a>
<ul class="nav navbar-nav">
<li data-stuff="inli"><a href="#" data-item="1">Another linkage</a></li>
</ul>
<p class="navbar-right navbar-text">Hello</p>
</div>
</div>
</nav>
This is (almost) identical to the Bootstrap documentation example. The differences should be: The form has an action and the input has an id and a name:
<%= navbar header => ['Brand', ['#'], hamburger, toggler => 'collapse-4124'],
nav => [ items => [
['Link', ['#'], active ],
['Link', ['#'] ],
['Dropdown', ['#'], caret, items => [
['Action', ['#'] ],
['Another action', ['#'] ],
['Something else here', ['#'] ],
[],
['Separated link', ['#'] ],
[],
['One more separated link', ['#'] ],
] ] ],
],
form => [
[['/login'], method => 'post', left],
[
formgroup => [
text_field => ['the-search', placeholder => 'Search' ],
],
submit_button => ['Submit'],
]
],
nav => [
right,
items => [
['Link', ['#'] ],
['Dropdown', ['#'], caret, items => [
['Action', ['#'] ],
['Another action', ['#'] ],
['Something else here', ['#'] ],
[],
['Separated link', ['#'] ],
],
]
],
]
%>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#collapse-4124">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="collapse-4124">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form action="/login" class="navbar-form navbar-left" method="post">
<div class="form-group">
<input class="form-control" id="the-search" name="the_search" placeholder="Search" type="text" />
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>