Nav

Clay Nav provides a clear and semantic navigation for your site

installyarn add @clayui/nav
versionNPM Version
useimport Nav from '@clayui/nav';

Nav

This is a component. Navigations share general markup and styles from the .nav class, therefore the components Nav Tabs, Nav Underline, Menubar, Navbar, Application Bar, Management Bar, and Navigation Bar all use .nav as its base.

.nav-link and .active.nav-link in the Nav doesn’t have any special styling to make it easier to overwrite via color modifiers used in Clay’s components above. If you would like to use a custom color scheme for the Nav, create a custom color modifier class and use the clay-nav-variant($map) mixin.

<ul className="nav">
	<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">
		<a className="disabled nav-link" href="#1">Documents and Media</a>
	</li>
	<li className="nav-item">
		<a className="nav-link" href="#1">Site Template</a>
	</li>
</ul>

Nav Divider

Add the class nav-divider on nav-item to show a border at the start. The class nav-divider-end should be used on nav-item to show a border at the end.

Nav Stacked

Use .nav-stacked class alongside with .nav.

<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">
		<a className="disabled nav-link" href="#1">Documents and Media</a>
	</li>
	<li className="nav-item">
		<a className="nav-link" href="#1">Site Template</a>
	</li>
	<li className="nav-item">
		<a className="nav-link" href="#1">Configuration</a>
	</li>
	<li className="nav-item">
		<a className="nav-link" href="#1">Identification</a>
	</li>
</ul>

Nav Nested

Add class nav-nested to the outermost nav to use padding to indent each nested nav.

Also collapsible when used with Bootstrap Collapse Plugin.

<ul className="nav nav-nested">
	<li className="nav-item">
		<a
			aria-controls="navCollapse01"
			aria-expanded="true"
			className="collapse-icon nav-link"
			data-toggle="collapse"
			href="#navCollapse01"
			role="button"
		>
			Basic Information
			<span className="collapse-icon-closed">
				<svg
					className="lexicon-icon lexicon-icon-caret-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#caret-right"></use>
				</svg>
			</span>
			<span className="collapse-icon-open">
				<svg
					className="lexicon-icon lexicon-icon-caret-bottom"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#caret-bottom"></use>
				</svg>
			</span>
		</a>
		<div className="collapse show" id="navCollapse01">
			<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">
					<a
						aria-controls="navCollapse02"
						aria-expanded="false"
						className="collapsed collapse-icon nav-link"
						data-toggle="collapse"
						href="#navCollapse02"
						role="button"
					>
						Documents and Media
						<span className="collapse-icon-closed">
							<svg
								className="lexicon-icon lexicon-icon-caret-right"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#caret-right"
								></use>
							</svg>
						</span>
						<span className="collapse-icon-open">
							<svg
								className="lexicon-icon lexicon-icon-caret-bottom"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#caret-bottom"
								></use>
							</svg>
						</span>
					</a>
					<div className="collapse" id="navCollapse02">
						<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">
		<a
			aria-controls="navCollapse03"
			aria-expanded="false"
			className="collapsed collapse-icon nav-link"
			data-toggle="collapse"
			href="#navCollapse03"
			role="button"
		>
			SEO
			<span className="collapse-icon-closed">
				<svg
					className="lexicon-icon lexicon-icon-caret-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#caret-right"></use>
				</svg>
			</span>
			<span className="collapse-icon-open">
				<svg
					className="lexicon-icon lexicon-icon-caret-bottom"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#caret-bottom"></use>
				</svg>
			</span>
		</a>
		<div className="collapse" id="navCollapse03">
			<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">
		<a
			aria-controls="navCollapse04"
			aria-expanded="false"
			className="collapsed collapse-icon nav-link"
			data-toggle="collapse"
			href="#navCollapse04"
			role="button"
		>
			Advanced
			<span className="collapse-icon-closed">
				<svg
					className="lexicon-icon lexicon-icon-caret-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#caret-right"></use>
				</svg>
			</span>
			<span className="collapse-icon-open">
				<svg
					className="lexicon-icon lexicon-icon-caret-bottom"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#caret-bottom"></use>
				</svg>
			</span>
		</a>
		<div className="collapse" id="navCollapse04">
			<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>

Nav Nested Margins

The same of Nav Nested but instead of use nav-nested class, use nav-nested-margins.

Nav Unstyled

Add nav-unstyled to your nav to remove spacing around nav-link and nav-btn.

<ul className="nav nav-unstyled">
	<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">
		<a className="disabled nav-link" href="#1">Documents and Media</a>
	</li>
	<li className="nav-item">
		<a className="nav-link" href="#1">Site Template</a>
	</li>
</ul>

Helpers

Dropdown toggle with anchor: dropdown-toggle nav-link.

Dropdown toggle with button: btn btn-unstyled dropdown-toggle nav-link.

An anchor in Nav Item styled like btn: btn btn-primary nav-btn nav-btn-monospaced.

A button in Nav Item styled like nav-link: btn btn-unstyled nav-link.

A button in Nav Item: btn btn-primary nav-btn.

A monospaced anchor in Nav Item: nav-link nav-link-monospaced.

A monospaced button in Nav Item: btn btn-primary nav-btn nav-btn-monospaced.

<ul className="nav">
	<li className="nav-item">
		<a className="active nav-link" href="#1">Basic Information</a>
	</li>
	<li className="nav-item">
		<button className="btn btn-unstyled nav-link" type="button">
			Details
		</button>
	</li>
	<li className="nav-item">
		<button className="btn btn-primary nav-btn" type="button">
			Details
		</button>
	</li>
	<li className="nav-item">
		<button className="btn btn-link nav-btn" type="button">Details</button>
	</li>
	<li className="nav-item">
		<button
			className="btn btn-primary nav-btn nav-btn-monospaced"
			type="button"
		>
			De
		</button>
	</li>
	<li className="nav-item">
		<a className="disabled nav-link" href="#1">Categorization</a>
	</li>
	<li className="dropdown nav-item">
		<button
			aria-expanded="false"
			aria-haspopup="true"
			className="btn btn-unstyled dropdown-toggle nav-link"
			data-toggle="dropdown"
			type="button"
		>
			More
			<svg
				className="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-bottom"></use>
			</svg>
		</button>
		<ul aria-labelledby="" className="dropdown-menu">
			<li><a className="dropdown-item" href="#1">App Section 4</a></li>
			<li><a className="dropdown-item" href="#1">App Section 5</a></li>
			<li><a className="dropdown-item" href="#1">App Section 6</a></li>
			<li><a className="dropdown-item" href="#1">App Section 7</a></li>
		</ul>
	</li>
	<li className="nav-item">
		<a className="nav-link nav-link-monospaced" href="#1">
			<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="btn btn-primary nav-btn nav-btn-monospaced" href="#1">
			<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">
		<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>
</ul>
Edit this page on GitHub

Contributors

Table of Contents