Skip to main content

Customizing Menu and Sidebar

Enhance the style and functionality of your platform's navigation with the ability to adjust the top menu bar and sidebar menu. Additionally, you can create custom external links to seamlessly integrate external resources into your menu.

The Menu Configuration section allows you to customize the appearance and behavior of your top menu bar. Take advantage of the following options:

  • Desktop Width: Define the width of the menu bar on desktop devices, ensuring it aligns perfectly with your platform's layout in pixels.
  • Mobile Width: Specify the width of the menu bar on mobile devices to optimize the user experience in pixels.
  • Menu Position: Choose the position of the hamburger menu icon, providing flexibility for seamless integration into your design.
  • Background Color: Set the background color of the menu bar to match your platform's visual theme.
  • Icon Color: Customize the color of the profile dropdown hamburger and hamburger icons, ensuring they align with your overall design.
  • Button Color: Define the color of the button on the menu bar for a cohesive and engaging user interface.
  • Button Text Color: Set the color of the text in the button on the menu bar to ensure optimal readability.
  • Button Hover Color: Customize the color of the button on the menu bar when it's hovered over, providing visual feedback to users.
  • Button Hover Text Color: Define the color of the text in the button on the menu bar when it's hovered over to maintain a consistent visual experience.
  • Button Transition Time: Set the transition time of the button on the menu bar, controlling the speed of the animation in seconds.
  • Button Transition Timing: Define the timing function of the button's transition animation to achieve the desired effect.

The Sidebar section enables you to tailor the style of your sidebar menu to align with your platform's design aesthetic. Customize the following options:

  • Background Color: Set the background color of the sidebar menu to create visual cohesion with your overall interface.
  • Link Color: Define the color of the links in the sidebar menu, ensuring they are visually appealing and distinguishable.
  • Divider Color: Specify the color of the divider in the sidebar menu, providing visual separation between menu items.
  • Divider Accent Color: Customize the color of the accent for the divider in the sidebar menu, adding subtle visual enhancements.

The External Links section empowers you to create custom outbound links that seamlessly integrate into your menu. Utilize up to three external links to connect users with external resources, such as social media profiles, external websites, or important documentation.