Skip to main content

Vertical Nav Props

warning

Please note that the VerticalNavContent used in this example is only for documentation purposes. If you want to use it in your own component, please import it from src/components/layout/horizontal/VerticalNavContent.tsx and use it accordingly.

The verticalNavProps prop is used to change the appearance of the vertical navigation menu when breakpoint is reached.

Width​

The width is used to change the width of the vertical navigation menu when breakpoint is reached.

Example​

/horizontal-menu/horizontal-nav/vertical-nav-props/width

Source Code​


Background Color​

The backgroundColor is used to change the background color of the vertical navigation menu when breakpoint is reached.

Example​

/horizontal-menu/horizontal-nav/vertical-nav-props/background-color

Source Code​


Background Image​

The backgroundImage is used to change the background image of the vertical navigation menu when breakpoint is reached.

Example​

/horizontal-menu/horizontal-nav/vertical-nav-props/background-image

Source Code​


Custom Styles​

The Custom Style feature provides the flexibility to apply custom styling to the vertical navigation menu when breakpoint is reached. With the customStyles prop, you can pass a set of CSS properties to customize the appearance of the navigation menu according to your design preferences. The customStyles prop accepts a CSSObject from the Emotion library.

Example​

/horizontal-menu/horizontal-nav/vertical-nav-props/custom-styles

Source Code​