Nav

Clay Nav provides a clear and semantic navigation for your site

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

Table of Contents

Basic Usage

import {Provider} from '@clayui/core';
import Nav from '@clayui/nav';
import React, {useState} from 'react';

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

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Nav>
					<Nav.Item>
						<Nav.Link active href="#">
							{'Active'}
						</Nav.Link>
					</Nav.Item>
					<Nav.Item>
						<Nav.Link href="#">{'Normal'}</Nav.Link>
					</Nav.Item>
					<Nav.Item>
						<Nav.Link disabled href="#">
							{'Disabled'}
						</Nav.Link>
					</Nav.Item>
				</Nav>
			</div>
		</Provider>
	);
}

API Reference

IForwardRef<HTMLUListElement, IProps>
Parameters
Properties

nested

boolean | undefined

Flag to indicate if nav-nested class should be applied. Adds padding to indent each nested navigation.

nestMargins

boolean | undefined

Flag to indicate if nav-nested-margins class should be applied. Adds margin to indent each nested navigation.

stacked

boolean | undefined

Flag to indicate if nav-stacked class should be applied.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>>
Parameters
Properties

active

boolean | undefined

Flag to indicate if active class should be applied.

collapsed

boolean | undefined

Flag to indicate if collapsed class should be applied.

disabled

boolean | undefined

Flag to indicate if disabled class should be applied.

showIcon

boolean | undefined

Flag to indicate if icon should be shown.

spritemap

string | undefined

Path to the spritemap that Icon should use when referencing symbols.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Item

({ children, className, ...otherProps }: React.HTMLAttributes<HTMLLIElement>) => JSX.Element
Returns
Element

Table of Contents