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 | 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>> | nullLink
React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | 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>> | nullItem
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLLIElement>) => JSX.Element
Returns
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