Appearance
Navigation Menu
On this page, you'll learn how to add mobile and desktop navigation items.
Starting
The configuration of the navigation menus can be found in the ./src/constants/menu directory inside the topMenu.tsx and mobileMenu.tsx files.
- Mobile Menu:
mobileMenu.tsx - Desktop Top Menu:
topMenu.tsx
Nav Item
Insert a new navigation item into the return array:
typescript
return [
{
key: 'home',
icon: <AiFillHome color="#F12C4C" size={22} />,
label: 'header.tabs.home',
path: paths.home,
},
]Props:
| Name | Required | Type | Description |
|---|---|---|---|
| key | true | string | Unique key to identify the item |
| icon | false | JSX.Element | Icon that will appear on the left side |
| label | true | string | Menu text with translation id |
| path | false | string | Route URL or link text |
| submenu | false | NavMenu[] | Array of nav items that will be part of the submenu |
| type | false | string | Type of item separator, group |
| onClick | false | function | onClick function that receives the MenuInfo parameter |