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
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
      • Text
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Menubar (Vertical Navigation)

An alternative navigation pattern that displays navigation items vertically.

Check the Lexicon Vertical Navigation Pattern for a more in-depth look at the motivations and proper usage of this component.
  • Menubar Vertical Expand Md
    • Menubar Vertical Expand Md with Buttons
  • Menubar Vertical Expand Lg

Menubar Vertical Expand Md

A pattern for collapsing vertical navigations, collapses at 767px. For vertical navigations that don't collapse use Nav Stacked or Nav Nested.

Details
  • Basic Information
    • Details
    • Categorization
    • Documents and Media
      • Details
      • Categorization
      • Documents and Media
      • Site Template
    • Site Template
  • SEO
    • Sitemap
    • Robots
  • Advanced
    • Default User Associations
    • Staging
    • Analytics
    • Maps
Copied!
Code Sample (expand to see it)
<nav class="menubar menubar-transparent menubar-vertical-expand-md">
	<a
		aria-controls="menubarVerticalMdCollapse01"
		aria-expanded="false"
		class="menubar-toggler"
		data-toggle="collapse"
		href="#menubarVerticalMdCollapse01"
		role="button"
	>
		<span class="c-inner" tabindex="-1">
			Details
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use xlink:href="/images/icons/icons.svg#caret-bottom" />
			</svg>
		</span>
	</a>
	<div class="collapse menubar-collapse" id="menubarVerticalMdCollapse01">
		<ul class="nav nav-nested-margins">
			<li class="nav-item">
				<a
					aria-controls="menubarVerticalMdNestedCollapse01"
					aria-expanded="true"
					class="collapse-icon nav-link"
					data-toggle="collapse"
					href="#menubarVerticalMdNestedCollapse01"
					role="button"
				>
					<span class="c-inner" tabindex="-1">
						Basic Information
						<span class="collapse-icon-closed">
							<svg
								class="lexicon-icon lexicon-icon-caret-right"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-right"
								/>
							</svg>
						</span>
						<span class="collapse-icon-open">
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-bottom"
								/>
							</svg>
						</span>
					</span>
				</a>
				<div
					class="collapse show"
					id="menubarVerticalMdNestedCollapse01"
				>
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="active nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Details</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Categorization</span
								></a
							>
						</li>
						<li class="nav-item">
							<a
								aria-controls="menubarVerticalMdNestedCollapse02"
								aria-expanded="false"
								class="collapsed collapse-icon nav-link"
								data-toggle="collapse"
								href="#menubarVerticalMdNestedCollapse02"
								role="button"
							>
								<span class="c-inner" tabindex="-1">
									Documents and Media
									<span class="collapse-icon-closed">
										<svg
											class="lexicon-icon lexicon-icon-caret-right"
											focusable="false"
											role="presentation"
										>
											<use
												xlink:href="/images/icons/icons.svg#caret-right"
											/>
										</svg>
									</span>
									<span class="collapse-icon-open">
										<svg
											class="lexicon-icon lexicon-icon-caret-bottom"
											focusable="false"
											role="presentation"
										>
											<use
												xlink:href="/images/icons/icons.svg#caret-bottom"
											/>
										</svg>
									</span>
								</span>
							</a>
							<div
								class="collapse"
								id="menubarVerticalMdNestedCollapse02"
							>
								<ul class="nav nav-stacked">
									<li class="nav-item">
										<a class="nav-link" href="#1"
											><span class="c-inner" tabindex="-1"
												>Details</span
											></a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											><span class="c-inner" tabindex="-1"
												>Categorization</span
											></a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											><span class="c-inner" tabindex="-1"
												>Documents and Media</span
											></a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											><span class="c-inner" tabindex="-1"
												>Site Template</span
											></a
										>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Site Template</span
								></a
							>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav-item">
				<a
					aria-controls="menubarVerticalMdNestedCollapse03"
					aria-expanded="false"
					class="collapsed collapse-icon nav-link"
					data-toggle="collapse"
					href="#menubarVerticalMdNestedCollapse03"
					role="button"
				>
					<span class="c-inner" tabindex="-1">
						SEO
						<span class="collapse-icon-closed">
							<svg
								class="lexicon-icon lexicon-icon-caret-right"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-right"
								/>
							</svg>
						</span>
						<span class="collapse-icon-open">
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-bottom"
								/>
							</svg>
						</span>
					</span>
				</a>
				<div class="collapse" id="menubarVerticalMdNestedCollapse03">
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Sitemap</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Robots</span
								></a
							>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav-item">
				<a
					aria-controls="menubarVerticalMdNestedCollapse04"
					aria-expanded="false"
					class="collapsed collapse-icon nav-link"
					data-toggle="collapse"
					href="#menubarVerticalMdNestedCollapse04"
					role="button"
				>
					<span class="c-inner" tabindex="-1">
						Advanced
						<span class="collapse-icon-closed">
							<svg
								class="lexicon-icon lexicon-icon-caret-right"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-right"
								/>
							</svg>
						</span>
						<span class="collapse-icon-open">
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-bottom"
								/>
							</svg>
						</span>
					</span>
				</a>
				<div class="collapse" id="menubarVerticalMdNestedCollapse04">
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Default User Associations</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Staging</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Analytics</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Maps</span
								></a
							>
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</nav>

Menubar Vertical Expand Md with Buttons

    • Details
    • Categorization
      • Details
      • Categorization
      • Documents and Media
      • Site Template
    • Site Template
    • Sitemap
    • Robots
    • Default User Associations
    • Staging
    • Analytics
    • Maps
Copied!
Code Sample (expand to see it)
<nav class="menubar menubar-transparent menubar-vertical-expand-md">
	<button
		aria-controls="menubarVerticalMdButtonsCollapse01"
		aria-expanded="false"
		class="menubar-toggler"
		data-toggle="collapse"
		data-target="#menubarVerticalMdButtonsCollapse01"
		role="button"
	>
		Details
		<svg
			class="lexicon-icon lexicon-icon-caret-bottom"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#caret-bottom" />
		</svg>
	</button>
	<div
		class="collapse menubar-collapse"
		id="menubarVerticalMdButtonsCollapse01"
	>
		<ul class="nav nav-nested-margins">
			<li class="nav-item">
				<button
					aria-controls="menubarVerticalMdNestedCollapseButton01"
					aria-expanded="true"
					class="btn btn-unstyled collapse-icon nav-link"
					data-toggle="collapse"
					data-target="#menubarVerticalMdNestedCollapseButton01"
					type="button"
				>
					Basic Information
					<span class="collapse-icon-closed">
						<svg
							class="lexicon-icon lexicon-icon-caret-right"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="/images/icons/icons.svg#caret-right"
							/>
						</svg>
					</span>
					<span class="collapse-icon-open">
						<svg
							class="lexicon-icon lexicon-icon-caret-bottom"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="/images/icons/icons.svg#caret-bottom"
							/>
						</svg>
					</span>
				</button>
				<div
					class="collapse show"
					id="menubarVerticalMdNestedCollapseButton01"
				>
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="active nav-link" href="#1">Details</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1">Categorization</a>
						</li>
						<li class="nav-item">
							<button
								aria-controls="menubarVerticalMdNestedCollapseButton02"
								aria-expanded="false"
								class="btn btn-unstyled collapsed collapse-icon nav-link"
								data-toggle="collapse"
								data-target="#menubarVerticalMdNestedCollapseButton02"
								type="button"
							>
								Documents and Media
								<span class="collapse-icon-closed">
									<svg
										class="lexicon-icon lexicon-icon-caret-right"
										focusable="false"
										role="presentation"
									>
										<use
											xlink:href="/images/icons/icons.svg#caret-right"
										/>
									</svg>
								</span>
								<span class="collapse-icon-open">
									<svg
										class="lexicon-icon lexicon-icon-caret-bottom"
										focusable="false"
										role="presentation"
									>
										<use
											xlink:href="/images/icons/icons.svg#caret-bottom"
										/>
									</svg>
								</span>
							</button>
							<div
								class="collapse"
								id="menubarVerticalMdNestedCollapseButton02"
							>
								<ul class="nav nav-stacked">
									<li class="nav-item">
										<a class="nav-link" href="#1"
											>Details</a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											>Categorization</a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											>Documents and Media</a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											>Site Template</a
										>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1">Site Template</a>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav-item">
				<button
					aria-controls="menubarVerticalMdNestedCollapseButton03"
					aria-expanded="false"
					class="btn btn-unstyled collapsed collapse-icon nav-link"
					data-toggle="collapse"
					data-target="#menubarVerticalMdNestedCollapseButton03"
					type="button"
				>
					SEO
					<span class="collapse-icon-closed">
						<svg
							class="lexicon-icon lexicon-icon-caret-right"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="/images/icons/icons.svg#caret-right"
							/>
						</svg>
					</span>
					<span class="collapse-icon-open">
						<svg
							class="lexicon-icon lexicon-icon-caret-bottom"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="/images/icons/icons.svg#caret-bottom"
							/>
						</svg>
					</span>
				</button>
				<div
					class="collapse"
					id="menubarVerticalMdNestedCollapseButton03"
				>
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="nav-link" href="#1">Sitemap</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1">Robots</a>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav-item">
				<button
					aria-controls="menubarVerticalMdNestedCollapseButton04"
					aria-expanded="false"
					class="btn btn-unstyled collapsed collapse-icon nav-link"
					data-toggle="collapse"
					data-target="#menubarVerticalMdNestedCollapseButton04"
					type="button"
				>
					Advanced
					<span class="collapse-icon-closed">
						<svg
							class="lexicon-icon lexicon-icon-caret-right"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="{{rootPath}}/images/icons/icons.svg#caret-right"
							/>
						</svg>
					</span>
					<span class="collapse-icon-open">
						<svg
							class="lexicon-icon lexicon-icon-caret-bottom"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="{{rootPath}}/images/icons/icons.svg#caret-bottom"
							/>
						</svg>
					</span>
				</button>
				<div
					class="collapse"
					id="menubarVerticalMdNestedCollapseButton04"
				>
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="nav-link" href="#1"
								>Default User Associations</a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1">Staging</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1">Analytics</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1">Maps</a>
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</nav>

Menubar Vertical Expand Lg

Collapses at 991px.

Details
  • Basic Information
    • Details
    • Categorization
    • Documents and Media
      • Details
      • Categorization
      • Documents and Media
      • Site Template
    • Site Template
  • SEO
    • Sitemap
    • Robots
  • Advanced
    • Default User Associations
    • Staging
    • Analytics
    • Maps
Copied!
Code Sample (expand to see it)
<nav class="menubar menubar-transparent menubar-vertical-expand-lg">
	<a
		aria-controls="menubarVerticalLgCollapse01"
		aria-expanded="false"
		class="menubar-toggler"
		data-toggle="collapse"
		href="#menubarVerticalLgCollapse01"
		role="button"
	>
		<span class="c-inner" tabindex="-1">
			Details
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use xlink:href="/images/icons/icons.svg#caret-bottom" />
			</svg>
		</span>
	</a>
	<div class="collapse menubar-collapse" id="menubarVerticalLgCollapse01">
		<ul class="nav nav-nested-margins">
			<li class="nav-item">
				<a
					aria-controls="menubarVerticalLgNestedCollapse01"
					aria-expanded="true"
					class="collapse-icon nav-link"
					data-toggle="collapse"
					href="#menubarVerticalLgNestedCollapse01"
					role="button"
				>
					<span class="c-inner" tabindex="-1">
						Basic Information
						<span class="collapse-icon-closed">
							<svg
								class="lexicon-icon lexicon-icon-caret-right"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-right"
								/>
							</svg>
						</span>
						<span class="collapse-icon-open">
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-bottom"
								/>
							</svg>
						</span>
					</span>
				</a>
				<div
					class="collapse show"
					id="menubarVerticalLgNestedCollapse01"
				>
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="active nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Details</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Categorization</span
								></a
							>
						</li>
						<li class="nav-item">
							<a
								aria-controls="menubarVerticalLgNestedCollapse02"
								aria-expanded="false"
								class="collapsed collapse-icon nav-link"
								data-toggle="collapse"
								href="#menubarVerticalLgNestedCollapse02"
								role="button"
							>
								<span class="c-inner" tabindex="-1">
									Documents and Media
									<span class="collapse-icon-closed">
										<svg
											class="lexicon-icon lexicon-icon-caret-right"
											focusable="false"
											role="presentation"
										>
											<use
												xlink:href="/images/icons/icons.svg#caret-right"
											/>
										</svg>
									</span>
									<span class="collapse-icon-open">
										<svg
											class="lexicon-icon lexicon-icon-caret-bottom"
											focusable="false"
											role="presentation"
										>
											<use
												xlink:href="/images/icons/icons.svg#caret-bottom"
											/>
										</svg>
									</span>
								</span>
							</a>
							<div
								class="collapse"
								id="menubarVerticalLgNestedCollapse02"
							>
								<ul class="nav nav-stacked">
									<li class="nav-item">
										<a class="nav-link" href="#1"
											><span class="c-inner" tabindex="-1"
												>Details</span
											></a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											><span class="c-inner" tabindex="-1"
												>Categorization</span
											></a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											><span class="c-inner" tabindex="-1"
												>Documents and Media</span
											></a
										>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#1"
											><span class="c-inner" tabindex="-1"
												>Site Template</span
											></a
										>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Site Template</span
								></a
							>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav-item">
				<a
					aria-controls="menubarVerticalLgNestedCollapse03"
					aria-expanded="false"
					class="collapsed collapse-icon nav-link"
					data-toggle="collapse"
					href="#menubarVerticalLgNestedCollapse03"
					role="button"
				>
					<span class="c-inner" tabindex="-1">
						SEO
						<span class="collapse-icon-closed">
							<svg
								class="lexicon-icon lexicon-icon-caret-right"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-right"
								/>
							</svg>
						</span>
						<span class="collapse-icon-open">
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-bottom"
								/>
							</svg>
						</span>
					</span>
				</a>
				<div class="collapse" id="menubarVerticalLgNestedCollapse03">
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Sitemap</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Robots</span
								></a
							>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav-item">
				<a
					aria-controls="menubarVerticalLgNestedCollapse04"
					aria-expanded="false"
					class="collapsed collapse-icon nav-link"
					data-toggle="collapse"
					href="#menubarVerticalLgNestedCollapse04"
					role="button"
				>
					<span class="c-inner" tabindex="-1">
						Advanced
						<span class="collapse-icon-closed">
							<svg
								class="lexicon-icon lexicon-icon-caret-right"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-right"
								/>
							</svg>
						</span>
						<span class="collapse-icon-open">
							<svg
								class="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									xlink:href="/images/icons/icons.svg#caret-bottom"
								/>
							</svg>
						</span>
					</span>
				</a>
				<div class="collapse" id="menubarVerticalLgNestedCollapse04">
					<ul class="nav nav-stacked">
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Default User Associations</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Staging</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Analytics</span
								></a
							>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#1"
								><span class="c-inner" tabindex="-1"
									>Maps</span
								></a
							>
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</nav>

How can this be improved? Create an issue!