This component is responsible for rendering elements on the sidebar navigation.
Usage
import { NavigationElement } from '@admin-bro/design-system'
return (
<NavigationElement
href="#"
open={true}
isSelected={false}
icon='Car'
label="Cars"
onClick={(event, props) => {console.log(event, props)}}
/>
)
Prop types
By default all the data are passed via NavigationElementProps - check them out below.
Example
This is a working example of a NavigationElement:
Type Definitions
# NavigationElementOnClickHandler(event, props)
Handler function for a NavigationElementProps['onClick']
Parameters:
| Name | Type | Description |
|---|---|---|
event |
React.MouseEvent.<HTMLAnchorElement, MouseEvent> | React.MouseEvent |
props |
NavigationElementProps | All props (along with the |
object
# NavigationElementProps
Prop Types of a NavigationElement component.
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
href |
string |
<optional> |
Link href property |
icon |
string |
<optional> |
Icon name |
isOpen |
boolean |
<optional> |
Indicates if navigation element should be open(able). If set to undefined: element wont be, "openable". Tf set to either false or true - element will be open or close. |
isSelected |
boolean |
<optional> |
If element should be selected |
label |
string | Label of the element |
|
id |
string |
<optional> |
Element uniq ID |
onClick |
NavigationElementOnClickHandler |
<optional> |
On Click handler |
