Nav

Clay Nav provides a clear and semantic navigation for your site

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

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>
	);
}

Table of Contents