Menu
Os menus são utilizados para criar a navegação entre páginas para webapp.
<menu class="c-nav--arky" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--der" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--kal" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--lile" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--low" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--lube" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--neli" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--pin" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--range" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--ren" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--rup" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--tie" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
Criando nav's de level 2
Podemos adicionar dentro de um link principal uma outra lista de opções, criando uma espécie de segundo nível.
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem aria-haspopup="true" class="c-nav__item--first" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
Criando nav's de level 3
Podemos adicionar dentro de um link leve 2 uma outra lista de opções, criando uma espécie de terceiro nível.
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<menuitem aria-haspopup="true" class="c-nav__item--first" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem aria-haspopup="true" class="c-nav__item--second" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--third is-hide" role="menubar">
<menuitem class="c-nav__item--third" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--third" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--third" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
Definindo uma brand para o nav
Podemos definir uma marca ou nome do projeto para o nav, chamado de brand.
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand" href="#">Brand</a>
<menuitem aria-haspopup="true" class="c-nav__item--first" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
Alinhando os elementos do nav
Através da classe c-nav__item--right conseguimos posicionar link's ou brand á direita do nav.
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand" href="#">Brand</a>
<menuitem aria-haspopup="true" class="c-nav__item--first c-nav__item--right" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand" href="#">Brand</a>
<menuitem aria-haspopup="true" class="c-nav__item--first c-nav__item--right" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand" href="#">Brand</a>
<menuitem aria-haspopup="true" class="c-nav__item--first c-nav__item--right" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand c-nav__item--right" href="#">Brand</a>
<menuitem aria-haspopup="true" class="c-nav__item--first" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand c-nav__item--right" href="#">Brand</a>
<menuitem aria-haspopup="true" class="c-nav__item--first c-nav__item--right" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand c-nav__item--right" href="#">Brand</a>
<menuitem aria-haspopup="true" class="c-nav__item--first c-nav__item--right" role="menuitem"><a class="has-dropdown" href="#" onclick="NavController.dropdown(this, event);" role="link">Link 1</a>
<menu class="c-nav__menu--second is-hide" role="menubar">
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menuitem>
<menuitem class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
Adicionando ícones
Podemos adicionar ícones nos link's para um melhor visual.
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand" href="#"><i class="icon-home"></i>Brand</a>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link"><i class="icon-calendar"></i>Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link"><i class="icon-help-circled"></i>Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link"><i class="icon-bell-alt"></i>Link 3</a></menuitem>
</menu>
</menu>
Adicionando imagens
Podemos adicionar imagens nos link's para definir uma foto de perfil.
Imagem quadrada
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand" href="#">Brand</a>
<menuitem class="c-nav__item--first c-nav__item--right" role="menuitem"><a class="has-picture" href="#" role="link"><img alt="Imagem de Perfil" class="c-nav__picture" src="https://api.adorable.io/avatars/271/abott@adorable" role="presentation">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>
Imagem redonda
Para deixar a imagem redonda, precisamos apenas adicionar a classe is-rounded na imagem.
<menu class="c-nav--gary" role="navigation">
<menu class="c-nav__menu--first" role="menubar">
<a class="c-nav__brand" href="#">Brand</a>
<menuitem class="c-nav__item--first c-nav__item--right" role="menuitem"><a class="has-picture" href="#" role="link"><img alt="Imagem de Perfil" class="c-nav__picture is-rounded" src="https://api.adorable.io/avatars/271/abott@adorable" role="presentation">Link 1</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></menuitem>
<menuitem class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></menuitem>
</menu>
</menu>