Nav
Clay Nav provides a clear and semantic navigation for your site
install | yarn add @clayui/nav |
---|
version | |
---|
use | import 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>
);
}
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<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>> | nullItem
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLLIElement>) => JSX.Element