Application Bar

This component is used as the main navigation of Liferay DXP.

Table of Contents

Dark
Using Buttons

Bootstrap 4 doesn’t support Dropdown Menu’s with Popper.js positioning inside Navbars. They align them manually via CSS classes. See Dropdown Alignment.

Dark

Snippet

<nav className="application-bar application-bar-dark navbar navbar-expand-md">
  <div className="container-fluid container-fluid-max-xl">
    <ul className="navbar-nav">
      <li className="nav-item">
        <a className="nav-link nav-link-monospaced" href="#1" role="button">
          <svg
            className="lexicon-icon lexicon-icon-product-menu-closed"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#product-menu-closed"></use>
          </svg>
        </a>
      </li>
      <li className="nav-item">
        <a className="nav-link nav-link-monospaced" href="#1" role="button">
          <svg
            className="lexicon-icon lexicon-icon-angle-left"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#angle-left"></use>
          </svg>
        </a>
      </li>
    </ul>
    <div className="navbar-title navbar-text-truncate">My Application Name</div>
    <ul className="navbar-nav">
      <li className="nav-item">
        <a className="nav-link nav-link-monospaced" href="#1" role="button">
          <svg
            className="lexicon-icon lexicon-icon-cog"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#cog"></use>
          </svg>
        </a>
      </li>
      <li className="nav-item">
        <a className="nav-link nav-link-monospaced" href="#1" role="button">
          <svg
            className="lexicon-icon lexicon-icon-plus"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#plus"></use>
          </svg>
        </a>
      </li>
      <li className="nav-item">
        <a className="nav-link nav-link-monospaced" href="#1" role="button">
          <svg
            className="lexicon-icon lexicon-icon-simulation-menu-closed"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#simulation-menu-closed"></use>
          </svg>
        </a>
      </li>
      <li className="dropdown nav-item">
        <a
          aria-expanded="false"
          aria-haspopup="true"
          className="dropdown-toggle nav-link nav-link-monospaced"
          data-toggle="dropdown"
          href="#1"
          role="button"
        >
          <svg
            className="lexicon-icon lexicon-icon-ellipsis-v"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#ellipsis-v"></use>
          </svg>
        </a>
        <ul
          aria-labelledby="navbarDropdownMenuLink"
          className="dropdown-menu dropdown-menu-right"
        >
          <li><a className="dropdown-item" href="#1">Action</a></li>
          <li>
            <a className="dropdown-item" href="#1">Another action</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Something else here</a>
          </li>
          <li className="dropdown-divider"></li>
          <li>
            <a className="dropdown-item" href="#1">Separated link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Using Buttons

Snippet

<nav className="application-bar application-bar-dark navbar navbar-expand-md">
  <div className="container-fluid container-fluid-max-xl">
    <ul className="navbar-nav">
      <li className="nav-item">
        <button
          className="btn btn-unstyled nav-btn nav-btn-monospaced"
          type="button"
        >
          <svg
            className="lexicon-icon lexicon-icon-product-menu-closed"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#product-menu-closed"></use>
          </svg>
        </button>
      </li>
      <li className="nav-item">
        <button
          className="btn btn-unstyled nav-btn nav-btn-monospaced"
          type="button"
        >
          <svg
            className="lexicon-icon lexicon-icon-angle-left"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#angle-left"></use>
          </svg>
        </button>
      </li>
    </ul>
    <div className="navbar-title navbar-text-truncate">My Application Name</div>
    <ul className="navbar-nav">
      <li className="nav-item">
        <button
          className="btn btn-unstyled nav-btn nav-btn-monospaced"
          type="button"
        >
          <svg
            className="lexicon-icon lexicon-icon-cog"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#cog"></use>
          </svg>
        </button>
      </li>
      <li className="nav-item">
        <button
          className="btn btn-unstyled nav-btn nav-btn-monospaced"
          type="button"
        >
          <svg
            className="lexicon-icon lexicon-icon-plus"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#plus"></use>
          </svg>
        </button>
      </li>
      <li className="nav-item">
        <button
          className="btn btn-unstyled nav-btn nav-btn-monospaced"
          type="button"
        >
          <svg
            className="lexicon-icon lexicon-icon-simulation-menu-closed"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#simulation-menu-closed"></use>
          </svg>
        </button>
      </li>
      <li className="dropdown nav-item">
        <button
          aria-expanded="false"
          aria-haspopup="true"
          className="btn btn-unstyled dropdown-toggle nav-btn nav-btn-monospaced"
          data-toggle="dropdown"
          type="button"
        >
          <svg
            className="lexicon-icon lexicon-icon-ellipsis-v"
            focusable="false"
            role="presentation"
          >
            <use href="/icons.svg#ellipsis-v"></use>
          </svg>
        </button>
        <ul
          aria-labelledby="navbarDropdownMenuLink"
          className="dropdown-menu dropdown-menu-right"
        >
          <li><a className="dropdown-item" href="#1">Action</a></li>
          <li>
            <a className="dropdown-item" href="#1">Another action</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Something else here</a>
          </li>
          <li className="dropdown-divider"></li>
          <li>
            <a className="dropdown-item" href="#1">Separated link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Dark
Using Buttons