ClayClay
  • 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
    • Drop Down
    • 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
    • Menubar (Vertical Navigation)
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
  • 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
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Navigation Bar

yarn add @clayui/navigation-bar

A navigation bar, navbar, is a horizontal bar that provides several access points to different parts of a system.

  • Examples
  • Markup
  • API

Stable3.69.0View in LexiconCHANGELOGstorybook demos

  • Light
  • Secondary
  • Using Buttons
You will need to adjust the z-index of .navbar-collapse in the collapsed state if there are multiple .navbar-collapse-absolute's near each other.
Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See Dropdown Alignment.
Don't forget to check WAI-ARIA accessibility pratices for alerts when writting your markup.

Light

App Section 2
  • App Section 1
  • App Section 2
  • App Section 3
  • More
    • App Section 4
    • App Section 5
Copied!
Code Sample (expand to see it)
<nav
	class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light"
>
	<div class="container-fluid container-fluid-max-xl">
		<a
			aria-controls="navigationBarCollapse00"
			aria-expanded="false"
			aria-label="Toggle Navigation"
			class="collapsed navbar-toggler navbar-toggler-link"
			data-toggle="collapse"
			href="#navigationBarCollapse00"
			role="button"
		>
			<span class="navbar-text-truncate">App Section 2</span>
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-bottom"></use>
			</svg>
		</a>
		<div
			class="collapse navbar-collapse"
			id="navigationBarCollapse00"
			style="z-index: 505;"
		>
			<div class="container-fluid container-fluid-max-xl">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#1">
							<span class="navbar-text-truncate"
								>App Section 1</span
							>
						</a>
					</li>
					<li aria-label="Current Page" class="nav-item">
						<a class="active nav-link" href="#1">
							<span class="navbar-text-truncate"
								>App Section 2</span
							>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#1">
							<span class="navbar-text-truncate"
								>App Section 3</span
							>
						</a>
					</li>
					<li class="dropdown nav-item show-dropdown-on-collapse">
						<a
							aria-expanded="false"
							aria-haspopup="true"
							class="dropdown-toggle nav-link"
							data-toggle="dropdown"
							href="#1"
							role="button"
						>
							<span class="navbar-text-truncate">More</span>
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#caret-bottom"
								></use>
							</svg>
						</a>
						<ul aria-labelledby="" class="dropdown-menu">
							<li>
								<a class="dropdown-item" href="#1"
									>App Section 4</a
								>
							</li>
							<li>
								<a class="dropdown-item" href="#1"
									>App Section 5</a
								>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>

Secondary

App Section 2
  • App Section 1
  • App Section 2
  • App Section 3
  • More
    • App Section 4
    • App Section 5
Copied!
Code Sample (expand to see it)
<nav
	class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-secondary"
>
	<div class="container-fluid container-fluid-max-xl">
		<a
			aria-controls="navigationBarCollapse01"
			aria-expanded="false"
			aria-label="Toggle Navigation"
			class="collapsed navbar-toggler navbar-toggler-link"
			data-toggle="collapse"
			href="#navigationBarCollapse01"
			role="button"
		>
			<span class="navbar-text-truncate">App Section 2</span>
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-bottom"></use>
			</svg>
		</a>
		<div
			class="collapse navbar-collapse"
			id="navigationBarCollapse01"
			style="z-index: 504;"
		>
			<div class="container-fluid container-fluid-max-xl">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#1">
							<span class="navbar-text-truncate"
								>App Section 1</span
							>
						</a>
					</li>
					<li aria-label="Current Page" class="nav-item">
						<a class="active nav-link" href="#1">
							<span class="navbar-text-truncate"
								>App Section 2</span
							>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#1">
							<span class="navbar-text-truncate"
								>App Section 3</span
							>
						</a>
					</li>
					<li class="dropdown nav-item show-dropdown-on-collapse">
						<a
							aria-expanded="false"
							aria-haspopup="true"
							class="dropdown-toggle nav-link"
							data-toggle="dropdown"
							href="#1"
							role="button"
						>
							<span class="navbar-text-truncate">More</span>
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#caret-bottom"
								></use>
							</svg>
						</a>
						<ul aria-labelledby="" class="dropdown-menu">
							<li>
								<a class="dropdown-item" href="#1"
									>App Section 4</a
								>
							</li>
							<li>
								<a class="dropdown-item" href="#1"
									>App Section 5</a
								>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>

Using Buttons

Copied!
Code Sample (expand to see it)
<nav
	class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light"
>
	<div class="container-fluid container-fluid-max-xl">
		<button
			aria-controls="navigationBarCollapse03"
			aria-expanded="false"
			aria-label="Toggle Navigation"
			class="collapsed navbar-toggler navbar-toggler-link"
			data-target="#navigationBarCollapse03"
			data-toggle="collapse"
			type="button"
		>
			<span class="navbar-text-truncate">App Section 2</span>
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-bottom"></use>
			</svg>
		</button>
		<div
			class="collapse navbar-collapse"
			id="navigationBarCollapse03"
			style="z-index: 503;"
		>
			<div class="container-fluid container-fluid-max-xl">
				<ul class="navbar-nav">
					<li class="nav-item">
						<button class="btn btn-unstyled nav-link" type="button">
							<span class="navbar-text-truncate"
								>App Section 1</span
							>
						</button>
					</li>
					<li aria-label="Current Page" class="nav-item">
						<button
							class="active btn btn-unstyled nav-link"
							type="button"
						>
							<span class="navbar-text-truncate"
								>App Section 2</span
							>
						</button>
					</li>
					<li class="nav-item">
						<button class="btn btn-unstyled nav-link" type="button">
							<span class="navbar-text-truncate"
								>App Section 3</span
							>
						</button>
					</li>
					<li class="dropdown nav-item show-dropdown-on-collapse">
						<button
							aria-expanded="false"
							aria-haspopup="true"
							class="btn btn-unstyled dropdown-toggle nav-link"
							data-toggle="dropdown"
							type="button"
						>
							<span class="navbar-text-truncate">More</span>
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#caret-bottom"
								></use>
							</svg>
						</button>
						<ul aria-labelledby="" class="dropdown-menu">
							<li>
								<button class="dropdown-item" type="button">
									App Section 4
								</button>
							</li>
							<li>
								<button class="dropdown-item" type="button">
									App Section 5
								</button>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>

How can this be improved? Create an issue!