--- layout: cypress title: Components/Navbar --- {% capture content %} <div class="navbar-brand"> <a class="navbar-item" href="{{ site.url }}"> <img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28"> </a> <a class="navbar-burger"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Home </a> <a class="navbar-item is-active"> Documentation </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> More </a> <div class="navbar-dropdown"> <a class="navbar-item"> About </a> <a class="navbar-item"> Jobs </a> <a class="navbar-item"> Contact </a> <hr class="navbar-divider"> <a class="navbar-item"> Report an issue </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> <a class="button is-primary"> <strong>Sign up</strong> </a> <a class="button is-light"> Log in </a> </div> </div> </div> </div> {% endcapture %} <nav id="navbar" class="navbar"> {{ content }} </nav> <nav id="navbar-container" class="navbar"> <div class="container"> {{ content }} </div> </nav> <nav id="navbar-has-shadow" class="navbar has-shadow"> {{ content }} </nav> <nav id="navbar-is-fixed-top" class="navbar is-fixed-top"> {{ content }} </nav> <nav id="navbar-is-fixed-bottom" class="navbar is-fixed-bottom"> {{ content }} </nav> {% for color in site.data.colors.justColors %} <nav id="navbar-{{ color }}" class="navbar is-{{ color }}"> <div class="navbar-brand"> <a class="navbar-item" href="{{ site.url }}"> {% if include.light %} <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"> {% else %} <img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"> {% endif %} </a> <div class="navbar-burger" data-target="navMenuColor{{ color }}-example"> <span></span> <span></span> <span></span> </div> </div> <div id="navMenuColor{{ color }}-example" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item" href="{{ site.url }}/"> Home </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link" href="{{ site.url }}/documentation/overview/start/"> Docs </a> <div class="navbar-dropdown"> <a class="navbar-item" href="{{ site.url }}/documentation/overview/start/"> Overview </a> <a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/"> Modifiers </a> <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/"> Columns </a> <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/"> Layout </a> <a class="navbar-item" href="{{ site.url }}/documentation/form/general/"> Form </a> <hr class="navbar-divider"> <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/"> Elements </a> <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/"> Components </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="field is-grouped"> <p class="control"> <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"> <span class="icon"> <i class="fab fa-twitter"></i> </span> <span> Tweet </span> </a> </p> <p class="control"> <a class="button is-primary" href="{{ site.data.meta.download }}"> <span class="icon"> <i class="fas fa-download"></i> </span> <span>Download</span> </a> </p> </div> </div> </div> </div> </nav> {% endfor %}