Nav
Clay Nav provides a clear and semantic navigation for your site
| install | yarn add @clayui/nav |
|---|---|
| version | |
| use | import Nav from '@clayui/nav'; |
Table of Contents
Basic Usage
import {Provider} from '@clayui/core'; import Nav from '@clayui/nav'; import React from 'react'; export default function App() { return ( <Provider spritemap="/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
Nav
IForwardRef<HTMLUListElement, IProps>Parameters
Properties
nested
boolean | undefinedFlag to indicate if nav-nested class should be applied. Adds padding to indent each nested navigation.
nestMargins
boolean | undefinedFlag to indicate if nav-nested-margins class should be applied. Adds margin to indent each nested navigation.
stacked
boolean | undefinedFlag to indicate if nav-stacked class should be applied.
Returns
ReactElement<any, string | JSXElementConstructor<any>> | nullLink
React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>>Parameters
Properties
active
boolean | undefinedFlag to indicate if active class should be applied.
collapsed
boolean | undefinedFlag to indicate if collapsed class should be applied.
disabled
boolean | undefinedFlag to indicate if disabled class should be applied.
showIcon
boolean | undefinedFlag to indicate if icon should be shown.
spritemap
string | undefinedPath to the spritemap that Icon should use when referencing symbols.
Returns
ReactElement<any, string | JSXElementConstructor<any>> | nullItem
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLLIElement>) => JSX.ElementReturns
ElementEdit this page on GitHub
Contributors
Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko, Diego Nascimento
Last edited May 11, 2025 at 5:57:01 PM
Table of Contents