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

<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="/images/icons/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="/images/icons/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="/images/icons/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="/images/icons/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="/images/icons/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="/images/icons/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

<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="/images/icons/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="/images/icons/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="/images/icons/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="/images/icons/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="/images/icons/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="/images/icons/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

Table of Contents

Dark
Using Buttons