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

get_html(opts)
get_html(Keyword.t) :: {:safe, [String.t]}

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"]] 
  ])