Stilize - Nav

                    
                        <nav class="c-nav--arky" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--der" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--kal" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--lile" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--low" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--lube" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--neli" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--pin" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--range" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--ren" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--rup" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>
                        <nav class="c-nav--tie" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

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.

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

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.

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li 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>
                                            <ul class="c-nav__menu--third is-hide" role="menubar">
                                                <li class="c-nav__item--third" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                                <li class="c-nav__item--third" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                                <li class="c-nav__item--third" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                            </ul>
                                        </li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

Definindo uma brand para o nav

Podemos definir uma marca ou nome do projeto para o nav, chamado de brand.

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand" href="#">Brand</a>
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

Alinhando os elementos do nav

Através da classe c-nav__item--right conseguimos posicionar link's ou brand á direita do nav.

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand" href="#">Brand</a>
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand" href="#">Brand</a>
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand" href="#">Brand</a>
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

                    
                       <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand c-nav__item--right" href="#">Brand</a>
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand c-nav__item--right" href="#">Brand</a>
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand c-nav__item--right" href="#">Brand</a>
                                <li 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>
                                    <ul class="c-nav__menu--second is-hide" role="menubar">
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 1</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                        <li class="c-nav__item--second" role="menuitem"><a href="#" role="link">Link 3</a></li>
                                    </ul>
                                </li>
                                <li class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first c-nav__item--right" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

Adicionando ícones

Podemos adicionar ícones nos link's para um melhor visual.

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand" href="#"><i class="icon-home"></i>Brand</a>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link"><i class="icon-calendar"></i>Link 1</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link"><i class="icon-help-circled"></i>Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link"><i class="icon-bell-alt"></i>Link 3</a></li>
                            </ul>
                        </nav>

Adicionando imagens

Podemos adicionar imagens nos link's para definir uma foto de perfil.

Imagem quadrada

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand" href="#">Brand</a>
                                <li 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></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>

Imagem redonda

Para deixar a imagem redonda, precisamos apenas adicionar a classe is-rounded na imagem.

                    
                        <nav class="c-nav--gary" role="navigation">
                            <ul class="c-nav__menu--first" role="menubar">
                                <a class="c-nav__brand" href="#">Brand</a>
                                <li 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></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 2</a></li>
                                <li class="c-nav__item--first" role="menuitem"><a href="#" role="link">Link 3</a></li>
                            </ul>
                        </nav>