Skip to main content

Navigation

This guide provides a list of CSS classes you can use to style the Navigation component in Experience Designer.

.zoovu-component-navigation-wrapper​

This class is used to style the wrapper for the entire navigation component, including all of its child elements.

.zoovu-component-navigation-crumbs-question-text​

Style the question text in the breadcrumb navigation component.

.zoovu-component-navigation-crumbs-answer-text​

Style the answer text in the breadcrumb navigation component.

.zoovu-component-navigation-progress-bar-background​

Style the background of the progress bar in the navigation component.

.zoovu-component-navigation-progress-bar-progress-color​

This class defines the color of the progress indicator in the navigation progress bar.

.zoovu-component-navigation-progress-bar-container​

Style the container of the progress bar, positioning it within the navigation component.

.zoovu-component-navigation-stepper-active-step​

Style the currently active step in the stepper component.

.zoovu-component-navigation-stepper-visited-step​

Style steps that have already been visited in the navigation stepper.

.zoovu-component-navigation-stepper-numeric-indicator​

Style the numeric indicator of each step in the stepper component.

.zoovu-component-navigation-stepper-result-step​

Style the result step in the navigation stepper.

.zoovu-component-navigation-stepper-result-step-active​

Style the active result step in the navigation stepper.

.zoovu-component-navigation-stepper-line​

Style the line connecting the steps in the navigation stepper.

.zoovu-component-navigation-stepper-line-color​

Define the color of the stepper line that connects each step.

.zoovu-component-navigation-stepper-line-visited-color​

Style the color of the stepper line for visited steps in the navigation stepper.