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 desktop and tablet devices, the side navigation remains visible and can be expanded or collapsed using the sideCollapsed property. On phone devices, the side navigation is hidden by default but can be displayed using the same sideCollapsed property.

ES6 Module Import​

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

Basic Sample​

Properties​

sideCollapsed​

DescriptionIndicates whether the side navigation is collapsed.
Typeboolean
Defaultfalse

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​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.