Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Application Bar

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

View in Lexicon

  • 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

My Application Name
    • Action
    • Another action
    • Something else here
    • Separated link
Copied!
Code Sample (expand to see it)
<nav class="application-bar application-bar-dark navbar navbar-expand-md">
	<div class="container-fluid container-fluid-max-xl">
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="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 class="nav-item">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-angle-left"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#angle-left"></use>
					</svg>
				</a>
			</li>
		</ul>
		<div class="navbar-title navbar-text-truncate">My Application Name</div>
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-cog"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#cog"></use>
					</svg>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="lexicon-icon lexicon-icon-plus"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#plus"></use>
					</svg>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link nav-link-monospaced" href="#1" role="button">
					<svg
						class="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 class="dropdown nav-item">
				<a
					aria-expanded="false"
					aria-haspopup="true"
					class="dropdown-toggle nav-link nav-link-monospaced"
					data-toggle="dropdown"
					href="#1"
					role="button"
				>
					<svg
						class="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"
					class="dropdown-menu dropdown-menu-right"
				>
					<li><a class="dropdown-item" href="#1">Action</a></li>
					<li>
						<a class="dropdown-item" href="#1">Another action</a>
					</li>
					<li>
						<a class="dropdown-item" href="#1"
							>Something else here</a
						>
					</li>
					<li class="dropdown-divider"></li>
					<li>
						<a class="dropdown-item" href="#1">Separated link</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</nav>

Using Buttons

My Application Name
    • Action
    • Another action
    • Something else here
    • Separated link
Copied!
Code Sample (expand to see it)
<nav class="application-bar application-bar-dark navbar navbar-expand-md">
	<div class="container-fluid container-fluid-max-xl">
		<ul class="navbar-nav">
			<li class="nav-item">
				<button
					class="btn btn-unstyled nav-btn nav-btn-monospaced"
					type="button"
				>
					<svg
						class="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 class="nav-item">
				<button
					class="btn btn-unstyled nav-btn nav-btn-monospaced"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-angle-left"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#angle-left"></use>
					</svg>
				</button>
			</li>
		</ul>
		<div class="navbar-title navbar-text-truncate">My Application Name</div>
		<ul class="navbar-nav">
			<li class="nav-item">
				<button
					class="btn btn-unstyled nav-btn nav-btn-monospaced"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-cog"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#cog"></use>
					</svg>
				</button>
			</li>
			<li class="nav-item">
				<button
					class="btn btn-unstyled nav-btn nav-btn-monospaced"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-plus"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#plus"></use>
					</svg>
				</button>
			</li>
			<li class="nav-item">
				<button
					class="btn btn-unstyled nav-btn nav-btn-monospaced"
					type="button"
				>
					<svg
						class="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 class="dropdown nav-item">
				<button
					aria-expanded="false"
					aria-haspopup="true"
					class="btn btn-unstyled dropdown-toggle nav-btn nav-btn-monospaced"
					data-toggle="dropdown"
					type="button"
				>
					<svg
						class="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"
					class="dropdown-menu dropdown-menu-right"
				>
					<li><a class="dropdown-item" href="#1">Action</a></li>
					<li>
						<a class="dropdown-item" href="#1">Another action</a>
					</li>
					<li>
						<a class="dropdown-item" href="#1"
							>Something else here</a
						>
					</li>
					<li class="dropdown-divider"></li>
					<li>
						<a class="dropdown-item" href="#1">Separated link</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</nav>

How can this be improved? Create an issue!