Navigation Bar

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

install	yarn add @clayui/navigation-bar
version
use	`import NavigationBar from '@clayui/navigation-bar';`

Table of Contents

Item
API Reference

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.

Open Sandbox

import {Provider} from '@clayui/core';
import NavigationBar from '@clayui/navigation-bar';
import Link from '@clayui/link';
import Button from '@clayui/button';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [active, setActive] = useState('Item 1');

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<NavigationBar triggerLabel={active}>
					<NavigationBar.Item active={active === 'Item 1'}>
						<Link
							href="#"
							onClick={(event) => {
								event.preventDefault();
								setActive('Item 1');
							}}
						>
							Item 1
						</Link>
					</NavigationBar.Item>
					<NavigationBar.Item active={active === 'Item 2'}>
						<Button onClick={() => setActive('Item 2')}>
							Item 2
						</Button>
					</NavigationBar.Item>
					<NavigationBar.Item active={active === 'Item 3'}>
						<Link
							href="#"
							onClick={(event) => {
								event.preventDefault();
								setActive('Item 3');
							}}
						>
							Item 3
						</Link>
					</NavigationBar.Item>
				</NavigationBar>
			</div>
		</Provider>
	);
}

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

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 <NavigationBar.Item> component to specify the element that will be rendered as an item. Components like <ClayButton /> and <Link /> when added as children of the component item are not required to add unique classes like nav-link or set the displayType to unstyled this is set OOTB.

Open Sandbox

import {Provider} from '@clayui/core';
import NavigationBar from '@clayui/navigation-bar';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const btnStyle = {
		padding: '5.5px 16px 5.5px 16px',
		borderColor: 'var(--indigo)',
	};

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<NavigationBar triggerLabel="Item 1" spritemap={spritemap}>
					<NavigationBar.Item active>
						<button
							className="btn btn-unstyled"
							style={btnStyle}
							type="button"
						>
							Item 1
						</button>
					</NavigationBar.Item>
					<NavigationBar.Item>
						<button
							className="btn btn-unstyled"
							style={btnStyle}
							type="button"
						>
							Item 2
						</button>
					</NavigationBar.Item>
					<NavigationBar.Item>
						<button
							className="btn btn-unstyled"
							style={btnStyle}
							type="button"
						>
							Item 3
						</button>
					</NavigationBar.Item>
				</NavigationBar>
			</div>
		</Provider>
	);
}

API Reference

typeof NavigationBar

Parameters

Properties

itemAriaCurrent

boolean | undefined= true

Flag to define if the item represents the current page. Disable this attribute only if there are multiple navigations on the page.

children *

React.ReactElement<IProps, string | React.JSXElementConstructor<any>> | Array<React.ReactElement<IProps, string | React.JSXElementConstructor<any>>>

Children elements received from ClayNavigationBar component.

fluidSize

any

Set a maximum width on container-fluid.

inverted

boolean | undefined

Determines the style of the Navigation Bar

messages

{ close: "Close"; open: "Open"; trigger: "{0} Menu, Current Page: {1}"; } | undefined= {"close":"Close","open":"Open","trigger":"{0} Menu, Current Page: {1}"}

Defines aria-label messages to display for the screen reader.

spritemap

string | undefined

Path to the location of the spritemap resource.

triggerLabel *

string

Set up dropdown's trigger label.

Returns

Element

Item

({ active, children, className, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

active

boolean | undefined

Determines the active state of an dropdown list item.

children *

React.ReactElement<any, string | React.JSXElementConstructor<any>>

Children elements received from ClayNavigationBar.Item component.

Returns

Element

Edit this page on GitHub

Contributors

Table of Contents

Item
API Reference