Menu Section Style
The Menu Section Style feature provides the flexibility to apply custom styling to the navigation sidebar. With the menuSectionStyle prop, you can pass a set of CSS properties to customize different elements within the menu section according to your design preferences.
Propsโ
type MenuSectionStyles = {
root?: CSSObject
label?: CSSObject
prefix?: CSSObject
suffix?: CSSObject
icon?: CSSObject
}
The menuSectionStyle prop accepts an object with multiple properties, each representing a specific element within the menu. These properties include:
| Property | Description |
|---|---|
| root | This property allows you to style the root element of the menu section. |
| label | This property allows you to style the label of all the menu sections. |
| prefix | This property allows you to style any prefix elements within all the menu sections. |
| suffix | This property allows you to style any suffix elements within all the menu sections. |
| icon | This property allows you to style the icon associated with all the menu sections. |
These properties can be customized by providing CSS objects with appropriate styles.
Exampleโ
/vertical-menu/menu/menu-section-styles
Source Codeโ
'use client'
// Component Imports
import VerticalNav, { Menu, MenuItem, MenuSection, SubMenu } from '@menu/vertical-menu'
const MenuSectionStyles = () => {
return (
<VerticalNav customBreakpoint='200px'>
<Menu
menuSectionStyles={{
root: {
color: '#c32bff',
backgroundColor: 'rgba(115, 103, 240, 0.06)'
},
label: {
color: '#4B465C'
}
}}
>
<MenuSection label='Dashboards & Apps'>
<SubMenu icon={<>๐ฅ</>} label='Dashboards'>
<MenuItem>Analytics</MenuItem>
<MenuItem>eCommerce</MenuItem>
</SubMenu>
<MenuItem icon={<>๐ฅ</>}>Calendar</MenuItem>
</MenuSection>
<MenuSection label='Others'>
<MenuItem icon={<>๐ฅ</>}>FAQ</MenuItem>
<SubMenu icon={<>๐ฅ</>} label='Menu Level'>
<MenuItem>Menu Level 2.1</MenuItem>
<SubMenu label='Menu Level 2.2'>
<MenuItem>Menu Level 3.1</MenuItem>
<MenuItem>Menu Level 3.2</MenuItem>
</SubMenu>
</SubMenu>
<MenuItem icon={<>๐ฅ</>}>Documentation</MenuItem>
</MenuSection>
</Menu>
</VerticalNav>
)
}
export default MenuSectionStyles