Materialize v0.1.4-dev Materialize.Components.Navbar
Use module for generate HTML block navbar.
Add alias in /web/views/layout_view.ex with configuration navbar:
alias Elixir.Materialize.Components.Navbar
def navbar(conn) do
Navbar.get_html([
[:wrap, [class: "nav-wrapper"], [class: "col s12"]],
[:logo, class: "brand-logo"]
[:ul, [
[:a, "list 1", [href: "#1"]],
[:a, "list 2", [href: "#2"]]
], [id: "id-link"]]
])
end
Use navbar in templates:
<div class="row"><%= navbar(@conn) %></div>
Result
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#1">list 1</a></li>
<li><a href="#2">list 2</a></li>
</ul>
</div>
</nav>
Default attributes
All default attributes are overwritten by the custom
Wrapper
[class: "nav-wrapper"] # set class if not set for first wrapper
If you need some wrappers
[:wrap, [class: "nav-wrapper"], [class: "col s12"]]
Result
<nav>
<div class="nav-wrapper"> <!--- wrapper 1 -->
<div class="col s12"> <!--- wrapper 2 -->
<!--- other elements --->
</div>
</div>
</nav>
Logo
Attributes
[href: "#", class: "brand-logo"] # if href or class not set
Name
"Logo" # if not set
List (ul elements for menu)
[id: "nav-mobile", class: "right hide-on-med-and-down"] # in not set class or id
Summary
Functions
Create tag span or etc
Functions
Create tag span or etc.
Parameters
- options: keyword list
Example
Elixir.Materialize.Components.Navbar.get_html([
[:wrap, [class: "nav-wrapper"], [class: "col s12"]],
[:logo, class: "brand-logo"]
[:ul, [
[:a, "list 1", [href: "#1"]],
[:a, "list 2", [href: "#2"]]
], [id: "id-link"]]
])