Customizing Navigation branding settings

From the Navigation branding settings, you can customize the appearance of the TopClass navigation menu to better match your organization’s branding and improve visual clarity for users.

By updating these settings, you can control the colors of the navigation menu button and its icon, define the background and text colors of the navigation pane, and adjust the color of shortcut icons. Using hex color codes, you can create a cohesive look that aligns with your brand guidelines while ensuring the menu remains clear, accessible, and easy to use.

To customize the global branding of the navigation, do the following:

1. Go to Customizations > Branding.

2. Click the Navigation tab. Update the following settings to modify the appearance of the Navigation pane:

   🚧

   Warning

   These settings affect the Navigation Menu Links, Shortcut Links, eLearning Course Navigation, and other on-screen Navigation elements.

   • Navigation Menu Button Color – Set the color of the navigation menu button using a hex color code.

   • Navigation Menu Button Icon Color – Set the color of the navigation menu button icon using a hex color code.

   • Navigation Menu Background Color – Set the background color of the navigation menu pane using a hex color code.

   • Navigation Menu Text Color – Set the text color of the navigation menu pane using a hex color code.

   • Shortcuts Icons Color – Set the color of the shortcuts icons using a hex color code.

   📘

   Note

   Click the question mark (?) icon beside each setting to view its location on the screen.

3. Use the Navigation Menu Layout section to select one of the following:

   1. Standard - Default TopClass navigation pattern with a vertically orientated, left-aligned navigation area.
      • Compact and information dense.
      • Optimized for task focused workflow.
      • Minimal visual emphasis.

        📘

        Note

        Best suited for prioritizing efficiency familiarity and reduced visual noise.

   2. Standard Enhanced - Visually enhanced version of the left-aligned navigation that introduces stronger visual hierarchy and branding elements.
      • Larger touch targets and clearer groupings.
      • Increased use of icons, spacing and brand accents.
      • Retains left-aligned structuring while improving discoverability.

        📘

        Note

        An upgraded, more visual experience, without fundamentally changing navigation patterns.

   3. Header Bar - Top-aligned navigation layout that emphasizes horizontal navigation and visual presentation including use of images and menu link descriptions.

      • Prominent header-based navigation.

      • Introduces use of visuals/images and greater use of white space.

      • Greater focus on presentation and navigation item descriptions.

        📘

        Note

        Suited for implementations where visual prominence and engagement is key.

   4. Click Navigation Menu Preview to preview each layout option.

4. Click Save.

5. To reset a single customization, click Reset. To restore all branding settings to the system defaults, click Reset All at the top of the page.