Navigation Bar (Navbar)

Un Navbar es una barra de navegación, que por lo general se ubica en la parte superior de una pagina.

Playground

Dropdown

Ruby
Html

  <header class="main-header">
    <!-- Header Navbar -->
    <nav class="navbar navbar-expand-lg <%= 'navbar-freemium' if General.freemium || General.freemium_onboarding %>">
      <% if !(General.freemium && General.freemium_onboarding) %>
        <ul class="navbar-nav">
          <!-- Sidebar toggle button-->
          <li class="nav-item">
            <a class="nav-link sidebar-toggle" data-toggle="push-menu" href="#">
              <%= md_icon('menu') %>
            </a>
          </li>

          <!-- MES ABIERTO -->
          <% if user_signed_in? %>
            <li class="nav-item ml-3 dropdown <%= 'hidden-sm hidden-xs ml-3' if General.look_and_feel %> <%= request.fullpath.start_with?(main_app.variables_path) ? 'active' : '' %>">
              <%= render 'variable_abierta' %>
            </li>
          <% end %>

          <!-- BUSCADOR -->
          <% if user_signed_in? %>
            <form class="form-inline mx-2 my-lg-0 mr-auto">
              <div class="search-bar">
                <% if user_signed_in? %>
                  <% if can? :index, Employee %>
                    <div class="global-employee-search">
                      <div class="input-group">
                        <input id="global_employee_search" type="text" name="q" class="form-control" autocomplete="off" placeholder="Buscar colaboradores (Ctrl+B)" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                          <span class="input-group-text" id="basic-addon2">
                            <%= md_icon('search', clase: 'd-none d-md-block') %>
                            <%= md_icon('times', clase: 'close-search-bar d-md-none',  options: { 'data-toggle': 'navbar'}) %>
                          </span>
                        </div>
                      </div>
                    </div>
                  <% end %>
                <% end %>
              </div>
            </form>
          <% end %>
        </ul>

        <div class="navbar-collapse">
          <% if user_signed_in? %>
            <ul class="navbar-nav ml-auto">
              <!--BUSCADOR-->
              <% if can? :index, Employee %>
                <li class="nav-item d-md-none">
                  <a class="nav-link" data-toggle="navbar">
                    <%= md_icon(:search) %>
                  </a>
                </li>
              <% end %>

              <!-- MENU ADMINISTRADOR -->
              <% unless menu_filtered.empty? %>
                <li class="nav-item ml-3 <%= request.fullpath.start_with?('/admin') ? 'active' : '' %>"
                    ic-trigger-on-load
                    ic-trigger-on="none">
                    <%= cell(Employee::ConfigLists::IndexCell) %>
                </li>
              <% end %>

              <!-- NOTIFICACIONES -->
              <% if can?(:index, Notificacion) && !General.desactivar_menu_notificaciones && !General.habilitar_tareas_pendientes %>
                <li class="nav-item dropdown notifications-menu" id="global-notifications" ic-src="<%= main_app.notificaciones_path %>">
                  <a class="nav-link">
                    <%= md_icon(:notifications) %>
                  </a>
                </li>
              <% end %>

              <!-- RECORDATORIOS -->
              <% if can?(:index, :pending) %>
                <% if General.freemium %>
                  <li class="nav-item ml-3" id="recordatorios-only-icon">
                    <a class="nav-link" title="Recordatorios">
                      <%= md_icon(label_icon, options: { class: 'fa-rotate-45-inv'}) %>
                    </a>
                  </li>
                <% else %>
                  <%# el trigger-on=none es para que no se haya trigger si le hacemos click al link %>
                  <li class="nav-item ml-3" ic-trigger-on-load ic-trigger-on="none" ic-get-from="<%= main_app.notifications_pendings_path %>">
                    <%= cell(Pending::CountCell, 0) %>
                  </li>
                <% end %>
              <% end %>

              <!-- NOTIFICACIONES FUN -->
              <% if can?(:index, :xdata) && Empresa.where.not(codigo_convenio_xdata: nil).exists? && !General.freemium %>
                <li class="nav-item ml-3 d-none d-md-block <%= request.fullpath.start_with?(main_app.integration_xdata_index_path) ? 'active' : '' %>" ic-src="<%= main_app.numero_notificaciones_integration_xdata_index_path %>">
                  <%= link_to md_icon(:article), main_app.integration_xdata_index_path, class: 'nav-link', title: "Notificaciones FUN" %>
                </li>
              <% end %>

              <!-- NOVEDADES -->
              <% if (current_user.permission_role.present? || current_user.superadmin?) && !General.freemium %>
                <%= cell(Layouts::BeamerCell, current_user) %>
              <% end %>

              <!-- AYUDA -->
              <% if show_help? %>
                <li class="nav-item ml-3 dropdown d-none d-md-block">
                  <%= link_to '#', {class: 'nav-link dropdown-toggle', title: 'Ayuda', data: {toggle: 'dropdown'}} do %>
                    <%= md_icon('help_outline', type: :outlined) %>
                  <% end %>

                  <div class="dropdown-menu dropdown-menu-right">
                    <%= link_to('Centro de Ayuda', help_center_url, target: :_blank, rel: 'noopener') %>

                    <% if suggestions_label.present? %>
                      <%= link_to(suggestions_label, suggestions_url, target: :_blank, rel: 'noopener') %>
                    <% end %>

                    <% if can? :new, SupportAccess %>
                      <%= link_to('Acceso a Soporte', new_support_access_path) %>
                    <% end %>

                    <% if community_url.present? %>
                      <%= link_to('Comunidad Buk', community_url, target: :_blank, rel: 'noopener') %>
                    <% end %>
                  </div>
                </li>
              <% end %>

              <!-- APP SWITCHER -->
              <% if General.mostrar_app_switcher %>
                <li class="nav-item ml-3 dropdown" id="app-switcher">
                  <%= render 'app_switcher_show' %>
                </li>
              <% end %>
              <!-- USUARIO -->
              <li class="nav-item ml-3"
                ic-trigger-on-load
                ic-trigger-on="none">
                <%= render 'my_account_show' %>
              </li>
            </ul>
          <% else %>
            <li class="nav-item ml-3"><%= link_to "Iniciar Sesión", main_app.new_user_session_path, class: 'nav-link nav-link-text' %></li>
          <% end %>
        </div>
      <% end %>
    </nav>
  </header>
                

  <header class="main-header">
    <nav class="navbar navbar-expand-lg ">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link sidebar-toggle" href="#">
            <span class=" material-icons" aria-hidden="true">menu</span>
          </a>
        </li>
        
        <form class="form-inline mx-2 my-lg-0 mr-auto">
          <div class="search-bar">
            <div class="global-employee-search">
              <div class="input-group">
                <span class="twitter-typeahead" >
                  <input id="global_employee_search" type="text" class="form-control tt-input" placeholder="Buscar colaboradores (Ctrl+B)" aria-expanded="false"/>
                  <div role="listbox" class="tt-menu" id="global_employee_search_listbox" aria-expanded="false">
                    <div role="presentation" class="tt-dataset tt-dataset-global-employee-search"></div>
                  </div>
                </span>
                <div class="input-group-append">
                  <span class="input-group-text" id="basic-addon2">
                    <span class=" material-icons notranslate d-none d-md-block" aria-hidden="true">search</span>
                    <span data-toggle="navbar" class=" material-icons notranslate d-md-none" aria-hidden="true">close</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </form>
      </ul>
      <div class="navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item hidden-lg">
            <a class="nav-link" data-toggle="navbar">
              <span class="material-icons" aria-hidden="true">search</span>
            </a>
          </li>
          <li class="nav-item ml-3">
            <a class="nav-link" title="Administración" href="#">
              <span class=" material-icons" aria-hidden="true">settings</span>
            </a>
          </li>
          <li class="nav-item ml-3">
            <a class="nav-link" href="#">
              <span class=" material-icons" aria-hidden="true">notifications</span>
              <label class="badge badge-danger">3</label>
            </a>
          </li>
          <li class="nav-item news-notifications ml-3 hidden-sm hidden-xs">
            <a class="nav-link beamer_beamerSelector beamerTrigger" title="Novedades" href="#">
              <span class=" material-icons" aria-hidden="true">campaign</span>
              <span class="badge badge-success news-count">11</span>
            </a>
          </li>
          
          <li class="nav-item ml-3">
            <a class="nav-link nav-link-user nav-link-text">
              <span class=" material-icons icon-size-2" aria-hidden="true">account_circle</span>
              <div class="ml-2 user-name hidden-sm hidden-xs">Usuario</div>
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
                

Anatomía

1. Contenedor

Contenedor principal de los componentes del navbar

2. Menu collapse

El header contiene siempre un título

3. barra de búsqueda

Texto para acompañar el títlo, contenido flexible. Los usos aceptados se muestran en la página anterior.