Menu Styling
In this section, you will learn how we have styled the menu and how you can customize it to fit your needs.
Our Menu Styling
We have styled the menu according to the layout: Vertical layout and Horizontal layout.
Vertical Layout
Menu styling for the Vertical layout is divided into three parts:
-
Root Styles
For defining the navigation menu styles—excluding menu item, submenu, and menu section styles—we've created the
src/@core/styles/vertical/navigationCustomStyles.ts
file. This file is then imported and utilized within thesrc/components/layout/vertical/Navigation.tsx
file to apply the styles.src/components/layout/vertical/Navigation.tsximport navigationCustomStyles from '@core/styles/vertical/navigationCustomStyles'
<VerticalNav
customStyles={navigationCustomStyles(/* parameters */)}
...
>You may refer to the Navigation Custom Styles example.
-
Menu Item Styles
For defining the menu item and submenu styles, we've created the
src/@core/styles/vertical/menuItemStyles.ts
file. This file is then imported and utilized within thesrc/components/layout/vertical/VerticalMenu.tsx
file to apply the styles.src/components/layout/vertical/VerticalMenu.tsximport menuItemStyles from '@core/styles/vertical/menuItemStyles'
<Menu
menuItemStyles={menuItemStyles(/* parameters */)}
...
>You may refer to the Menu Item Styles example.
-
Menu Section Styles
For defining the menu section styles, we've created the
src/@core/styles/vertical/menuSectionStyles.ts
file. This file is then imported and utilized within thesrc/components/layout/vertical/VerticalMenu.tsx
file to apply the styles.src/components/layout/vertical/VerticalMenu.tsximport menuSectionStyles from '@core/styles/vertical/menuSectionStyles'
<Menu
menuSectionStyles={menuSectionStyles(/* parameters */)}
...
>You may refer to the Menu Section Styles example.
Horizontal Layout
Menu styling for the Horizontal layout is divided into various parts:
-
Navigation Content Wrapper Styles
For defining the navigation content wrapper styles, we've created the
StyledDiv
styled component within thesrc/components/layout/horizontal/Navigation.tsx
file. -
Menu Root Styles
For defining the menu root styles, we've created the
src/@core/styles/horizontal/menuRootStyles.ts
file. This file is then imported and utilized within thesrc/components/layout/horizontal/HorizontalMenu.tsx
file to apply the styles.src/components/layout/horizontal/HorizontalMenu.tsximport menuRootStyles from '@core/styles/horizontal/menuRootStyles'
<Menu
rootStyles={menuRootStyles(/* parameters */)}
...
>You may refer to the Menu Root Styles example.
-
Menu Item Styles
For defining the menu item and submenu styles, we've created the
src/@core/styles/horizontal/menuItemStyles.ts
file. This file is then imported and utilized within thesrc/components/layout/horizontal/HorizontalMenu.tsx
file to apply the styles.src/components/layout/horizontal/HorizontalMenu.tsximport menuItemStyles from '@core/styles/horizontal/menuItemStyles'
<Menu
menuItemStyles={menuItemStyles(/* parameters */)}
...
>You may refer to the Menu Item Styles example.
-
Adapting Navigation for Small Screens
To accommodate smaller screens, the horizontal menu transitions to a vertical format. This responsive behavior is enabled by setting the
switchToVertical
prop on theHorizontalNav
component found insrc/components/layout/horizontal/HorizontalMenu.tsx
. For styling this vertically aligned menu on smaller devices, we apply thenavigationCustomStyles
and themenuItemStyles
styles as detailed in the Vertical Layout section above.src/components/layout/horizontal/HorizontalMenu.tsximport VerticalNavContent from './VerticalNavContent'
import verticalNavigationCustomStyles from '@core/styles/vertical/navigationCustomStyles'
import verticalMenuItemStyles from '@core/styles/vertical/menuItemStyles'
<HorizontalNav
switchToVertical
verticalNavContent={VerticalNavContent}
verticalNavProps={{
customStyles: verticalNavigationCustomStyles(/* parameters */),
...
}}
...
>
<Menu
verticalMenuProps={{
menuItemStyles: verticalMenuItemStyles(/* parameters */),
...
}}
...
>
...
</Menu>
</HorizontalNav>You may refer to the Custom root styles for small screen example and the Custom menu item styles for small screen example.
Customizing the Menu Styling
Suppose you want to customize the menu item styles in the Vertical layout, you can do the following:
import menuItemStyles from '@core/styles/vertical/menuItemStyles'
// You may create a new file for your custom styles
const userMenuItemStyles = (/* parameters if any */) => ({
// your custom styles
})
<Menu
menuItemStyles={{
...menuItemStyles(/* parameters */),
...userMenuItemStyles(/* parameters if any */)
}}
...
/>
This approach allows for the customization of the menu item styles by combining the default styles with your custom styles.
You can customize all the other menu styles in a similar manner.