Vertical Navigation

View in Lexicon

An alternative navigation pattern that displays navigation items vertically.

Table of Contents

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.

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

Menubar Vertical Expand Md with Buttons

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

Menubar Vertical Expand Lg

Collapses at 991px.

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

Contributors

Matuzalém Teles

Last edited January 29, 2025 at 1:35:05 AM

Table of Contents