Skip to main content

NavigationLayout

<ui5-navigation-layout> | Since 2.4.0

The ui5-navigation-layout is a container component that can be used to create a layout with a header, a side navigation and a content area.

Usage​

Use the ui5-navigation-layout to create whole screen of an application with vertical navigation.

Responsive Behavior​

On larger screens (screen width of 600px or more), the side navigation is visible by default and can be expanded or collapsed using the mode property. On small screens (screen width of 599px or less), the side navigation is hidden by default and can be displayed using the mode property.

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";

Basic Sample​

Properties​

mode​

DescriptionSpecifies the navigation layout mode.
Type"Auto" | "Collapsed" | "Expanded"
Default"Auto"

Slots​

DescriptionDefines the header.
TypeArray<HTMLElement>

sideContent​

DescriptionDefines the side content.
TypeArray<SideNavigation>

default​

DescriptionDefines the content.
TypeArray<HTMLElement>

Events​

No events available for this component.

Methods​

isSideCollapsed​

DescriptionGets whether the side navigation is collapsed.
Return typeboolean

CSS Parts​

No CSS parts available for this component.