The Navigation view intended for top-level navigation for your app. It has multiple options and will adapt and change behavior for different screen sizes.
The control consists of the following sections: banner, navigation-header, navigation-items and footer-items.
The banner is placed in the header of the navigation view. It will be located to the right of the hamburger icon (if present). It will be wrapped in a div with class
.banner and you can insert both text and images inside it.
The purpose of this is a header block on top of the navigation with content that is related to navigation. E.g a search input field. This block is unstyled.
Here you can put your navigation links. Navigation items are rendered as an
<ul class="navigation-items"> so you should insert your links wrapped in
<li>. We recommend that you use our specially made
<navigation-view-item> for your navigation. This component renders as
<li class="navigation-view-item"> and has built-in functionality that is perfectly fit for this navigation. Read more about NavigationViewItem here.
Often we see that we need some navigation links that is different from each other. That the links serve different purposes within the application. E.g Settings, User profile, My page, etc. These can be placed in the
footer-items block. Footer-items are as navigation-items, rendered as an
<ul class="footer-items"> . You need to insert
<li> items into the footer-items. Also here, we recommend using our specially made
<navigation-view-item> for your footer links.
<navigation-view> <banner> Banner </banner> <navigation-header> Some header content </navigation-header> <navigation-items> <navigation-view-item>Link item</navigation-view-item> </navigation-items> <footer-items> <navigation-view-item>Footer link item</navigation-view-item> </footer-items> </navigation-view>
||NavigationViewItem||You set your selected navigation item from your view.||null|
||Boolean||Tells the display pane if it’s expanded or not. Can be set in the custom elements attribute. Will be toggled by the hamburger icon.||false|
||String (‘left’, ‘left-compact’, ‘left-minimal’, ‘top’)||Defines the main behavior of the control. You can read the details further down on this page.||left|
The paneDisplayMode is by default set to left. You can change this by setting the attribute of the custom element to be
rem units in our styling. When
font-size is set to
rem refers to the default
font-size set in the browser. The default
font-size in most major browsers, is
16px. That is what our calculations is based of.
1rem = 16px
paneDisplayMode.left will always act fully expanded on the left side of the screen. Stretched in full height and
320px when base
16px) width. This counts for screen sizes tablet and up. On-screen smaller than
37.5rem(600px), the menu will be out of view on the left side, a hamburger icon will appear top, left on the screen, and when toggled, the menu will slide in from the left.
paneDisplayMode.left-compact will display the navigation view as a compact sidebar on the left. It’ll be
3rem wide, and it can be toggled with the always visible hamburger icon. It will then animate to
This behavior will be the same on all screen sizes. Except for the width when it’s expanded. It’ll be
80vw (80% of the viewport) on small screens. On tablet size and up, it’ll be
paneDisplayMode.left-minimal will have the same behavior as
paneDisplayMode.left on small screens, but will force it to stay this way on all screen sizes. When toggled by the hamburger, it will slide in
80vw on small screens and
20rem on tablet and up.
The navigation view will act as a navigation bar on top of the screen.
paneDisplayMode.top is not completly implemented yet.