Components/Cx Side Navigation

The Side Navigation can display structures of up to three levels. In the Wide variant: - The first levels always shows an icon - If first-level items have children, they show the expand/collapse arrows - Second level items do not display an icon and are not indented - If second-level items have children, they show the expand/collapse arrows - Third level items do not display an icon and are indented by 2 rem (32px) In the Narrow variant: - The first levels always shows an icon - If first-level items have children, they show the expand/collapse arrows - If first-level items have children, and they are clicked, the popover displays the First-level item in bold letters, then the second level items in regular. - Second level items do not display an icon and are not indented - If second-level items have children, they show the expand/collapse arrows - Third level items do not display an icon and are indented by 2 rem (32px)

Important: This type of Side Navigation does not have Narrow variant.

Side Navigation can react dynamically to long label texts in navigational items. In such case the width of the Side Navigation is adapted by the longest label. The label does not wrap or truncate. Use the modifier class .fdx-side-nav--dynamic-width for Side Navigation with dynamic width.

Important: This type of Side Navigation does not have Narrow variant.

For compact Side Navigation apply the .fdx-side-nav--compact modifier class with .fdx-side-nav base class, and .fdx-nested-list--compact modifier class with .fdx-nested-list base class.

For compact Side Navigation apply the .fdx-side-nav--compact modifier class with .fdx-side-nav base class, and .fdx-nested-list--compact modifier class with .fdx-nested-list base class.

For Narrow variant of Side Navigation apply .fdx-side-nav--narrow modifier class to .fdx-side-nav base class.

Side Navigation Popover can react dynamically to long label texts in navigational items. In such case the width of the Side Navigation Popover is adapted by the longest label. The label does not wrap or truncate. Use the modifier class .fdx-side-nav__popover-body--dynamic-width modifier class with .fdx-side-nav__popover-body base class for Side Navigation Popover with dynamic width.

For Narrow variant of Side Navigation in compact mode apply .fdx-side-nav--narrow and .fdx-side-nav--compact modifier classed to .fdx-side-nav base class.

By default, side navigation will wrap long text into multiple lines if the width of the nav is not enough. Developers can modify this behaviour by adding .fdx-side-nav--single-line class modifier.