Navigation Bar

yarn add @clayui/navigation-bar

React Component
CSS / Markup

Stable3.0.3

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

Item
API
- ClayNavigationBar
- ClayNavigationBar.Item

Take a look at our Storybook for more information about this component.

Check the Lexicon Navigation Bar Pattern for a more in-depth look at the motivations and proper usage of this component.

As described on Lexicon, a NavigationBar can be styled with an inverted theme. It displays navigation items in a dark background with light text. It is always placed right below the header. Use inverted property for this.

triggerLabel property is mandatory because it specifies the name of the trigger of the dropdown that will be placed when the screen when on small screens.

Item

For enabling more personalization on NavigationBar items, you can pass <ClayNavigationBar.Item> component to specify the element that will be rendered as an item.

Use the property active to specify which element is currently active on the navigation.

import ClayNavigationBar from '@clayui/navigation-bar';
import React from 'react';

import ClayNavigationBar from '@clayui/navigation-bar';
import React from 'react';

const Component = () => {
  const btnStyle = {
    padding: "5.5px 16px 5.5px 16px",
    borderColor: "var(--indigo)"
  };

  return (
    <ClayNavigationBar triggerLabel="Item 1" spritemap={spritemap}>
      <ClayNavigationBar.Item active>
        <button
          className="btn btn-unstyled btn-block btn-sm"
          style={btnStyle}
          type="button"
        >
          Item 1
        </button>
      </ClayNavigationBar.Item>
      <ClayNavigationBar.Item>
        <button
          className="btn btn-unstyled btn-block btn-sm"
          style={btnStyle}
          type="button"
        >
          Item 2
        </button>
      </ClayNavigationBar.Item>
      <ClayNavigationBar.Item>
        <button
          className="btn btn-unstyled btn-block btn-sm"
          style={btnStyle}
          type="button"
        >
          Item 3
        </button>
      </ClayNavigationBar.Item>
    </ClayNavigationBar>
  );
};

render(<Component />);

const Component = () => {
  const btnStyle = {
    padding: "5.5px 16px 5.5px 16px",
    borderColor: "var(--indigo)"
  };
  return (
    <ClayNavigationBar triggerLabel="Item 1" spritemap={spritemap}>
      <ClayNavigationBar.Item active>
        <button
          className="btn btn-unstyled btn-block btn-sm"
          style={btnStyle}
          type="button"
        >
          Item 1
        </button>
      </ClayNavigationBar.Item>
      <ClayNavigationBar.Item>
        <button
          className="btn btn-unstyled btn-block btn-sm"
          style={btnStyle}
          type="button"
        >
          Item 2
        </button>
      </ClayNavigationBar.Item>
      <ClayNavigationBar.Item>
        <button
          className="btn btn-unstyled btn-block btn-sm"
          style={btnStyle}
          type="button"
        >
          Item 3
        </button>
      </ClayNavigationBar.Item>
    </ClayNavigationBar>
  );
};
render(<Component />);

nav-link class is mandatory for styling the children of ClayNavigationBar.Item as Lexicon describes but if you don't prefer to follow Lexicon, you can style with whatever you want.

import ClayLink from '@clayui/link';
import ClayNavigationBar from '@clayui/navigation-bar';
import React from 'react';

import ClayLink from '@clayui/link';
import ClayNavigationBar from '@clayui/navigation-bar';
import React from 'react';

const Component = () => {
  return (
    <ClayNavigationBar triggerLabel="Item 1" spritemap={spritemap}>
      <ClayNavigationBar.Item active>
        <ClayLink className="nav-link" displayType="unstyled">
          Item 1
        </ClayLink>
      </ClayNavigationBar.Item>
      <ClayNavigationBar.Item>
        <ClayLink className="nav-link" displayType="unstyled">
          Item 2
        </ClayLink>
      </ClayNavigationBar.Item>
      <ClayNavigationBar.Item>
        <ClayLink className="nav-link" displayType="unstyled">
          Item 3
        </ClayLink>
      </ClayNavigationBar.Item>
    </ClayNavigationBar>
  );
};

render(<Component />);

const Component = () => {
  return (
    <ClayNavigationBar triggerLabel="Item 1" spritemap={spritemap}>
      <ClayNavigationBar.Item active>
        <ClayLink className="nav-link" displayType="unstyled">
          Item 1
        </ClayLink>
      </ClayNavigationBar.Item>
      <ClayNavigationBar.Item>
        <ClayLink className="nav-link" displayType="unstyled">
          Item 2
        </ClayLink>
      </ClayNavigationBar.Item>
      <ClayNavigationBar.Item>
        <ClayLink className="nav-link" displayType="unstyled">
          Item 3
        </ClayLink>
      </ClayNavigationBar.Item>
    </ClayNavigationBar>
  );
};
render(<Component />);

API

ClayNavigationBar

Property	Type	Required	Default	Description
children	Array<React.ReactElement<React.ComponentProps<typeof Item>>>	true		Children elements received from ClayNavigationBar component.
inverted	boolean		false	Determines the style of the Navigation Bar
spritemap	string			Path to the location of the spritemap resource.
triggerLabel	string	true		Set up dropdown's trigger label.

ClayNavigationBar.Item

Property	Type	Required	Default	Description
active	boolean		false	Determines the active state of an dropdown list item.
children	React.ReactElement	true		Children elements received from ClayNavigationBar.Item component.

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

Light
Secondary
Using Buttons

Check the Lexicon Navigation Bar Pattern for a more in-depth look at the motivations and proper usage of this component.

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

<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

<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

<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>