NavigationBar

The navigation bar facilitates easy switching between main pages on mobile devices.

Usage

Import the component:

import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';

Import the TypeScript type:

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';

Example: (Note: The style="position: relative" in the example is for demonstration purposes. Remove it in actual use.)

Item 1 Item 2 Item 3
<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

Note:

By default, this component uses a position: fixed style and automatically adds a padding-bottom style to the body to prevent page content from being obscured. However, it uses a position: absolute style in the following cases:

  1. When the scroll-target attribute is specified. In this case, padding-bottom is added to the specified element.
  2. When it's inside the <mdui-layout></mdui-layout> component. In this case, padding-bottom is not added.

Examples

Label Visibility

Text labels in the navigation bar are always visible when there are 3 or fewer navigation items. If there are more than 3 items, only the text of the selected item is displayed.

The label-visibility attribute on <mdui-navigation-bar> controls the visibility of text labels. Possible values:

  • selected: Only the text of the selected item is displayed.
  • labeled: Text is always displayed.
  • unlabeled: Text is never displayed.

In Container

By default, the navigation bar is relative to the current window and appears at the bottom of the page.

If you want to place the navigation bar within a specific container, use the scroll-target attribute on <mdui-navigation-bar>. The value should be the CSS selector or DOM element of the container with scrollable content. In this case, the navigation bar will be relative to the parent element. You need to manually add the styles position: relative; overflow: hidden to the parent element.

Hide on Scroll

The scroll-behavior attribute on <mdui-navigation-bar> controls the visibility of the navigation bar during scrolling. Set its value to hide to hide the navigation bar when scrolling down and show it when scrolling up.

The scroll-threshold attribute sets the number of pixels to start hiding the navigation bar.

Icons

The icon attribute on <mdui-navigation-bar-item> sets the icon for the inactive state. The active-icon attribute sets the icon for the active state. Alternatively, use the icon and active-icon slots to set the icons for the inactive and active states.

Use the href attribute on the <mdui-navigation-bar-item> component to turn the navigation item into a link. The download, target, and rel attributes are available for link-related functionality.

Badge

You can add a badge to the <mdui-navigation-bar-item> component using the badge slot.

AttributePropertyReflectTypeDefault

Hides the navigation bar when set.

Specifies the visibility of the text. Possible values:

  • auto: Visible if there are 3 or fewer options, otherwise only the selected state is visible.
  • selected: Only visible in the selected state.
  • labeled: Always visible.
  • unlabeled: Never visible.

The value of the selected <mdui-navigation-bar-item>.

Defines the scroll behavior. Possible values:

  • hide: Hides when scrolling.

The element that listens for scroll events. Accepts a CSS selector, DOM element, or JQ object. Defaults to window.

The scroll distance (in pixels) that triggers the scroll behavior.

Specifies the layout order within the <mdui-layout> component. Items are sorted in ascending order. The default value is 0.

Name

Emitted when the value changes.

Emitted when the navigation bar starts to show. Can be prevented with event.preventDefault().

Emitted after the navigation bar has shown and animations are complete.

Emitted when the navigation bar starts to hide. Can be prevented with event.preventDefault().

Emitted after the navigation bar has hidden and animations are complete.

Name

Contains <mdui-navigation-bar-item> components.

Name

The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

The CSS z-index value of the component.

AttributePropertyReflectTypeDefault

Specifies the Material Icons name for the inactive state. Alternatively, use slot="icon".

Specifies the Material Icons name for the active state. Alternatively, use slot="active-icon".

The value of the navigation item.

The URL for the hyperlink. If specified, the component renders as an <a> element and can use link-related attributes.

Instructs the browser to treat the linked URL as a download.

Note: This is only available when href is specified.

Defines where to display the linked URL. Possible values:

  • _blank: Opens in a new tab or window.
  • _parent: Opens in the parent browsing context or _self if no parent exists.
  • _self: Opens in the current browsing context. (Default).
  • _top: Opens in the topmost browsing context or _self if no ancestors exist.

Note: This is only available when href is specified.

Specifies the relationship of the linked URL as space-separated link types. Possible values:

  • alternate: Alternate versions of the current document.
  • author: Author of the current document or article.
  • bookmark: Permanent link for the nearest ancestor section.
  • external: The referenced document is not part of the same site as the current document.
  • help: Link to context-sensitive help.
  • license: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
  • me: Indicates that the current document represents the person who owns the linked content.
  • next: Indicates that the current document is part of a series and the next document in the series is the referenced document.
  • nofollow: Indicates that the current document's original author or publisher does not endorse the referenced document.
  • noreferrer: No Referer header will be included. Also has the same effect as noopener.
  • opener: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value).
  • prev: Indicates that the current document is part of a series and the previous document in the series is the referenced document.
  • search: Links to a resource that can be used to search through the current document and its related pages.
  • tag: Gives a tag (identified by the given address) that applies to the current document.

Note: This is only available when href is specified.

Determines if the element should be focused when the page loads.

Specifies the order in which the element receives focus when navigating with the Tab key.

NameParametersReturns

Simulates a mouse click on the element.

Sets focus on the element. An optional parameter can be an object with a preventScroll property. If preventScroll is set to true, the page will not scroll to bring the focused element into view.

Removes focus from the element.

Name

Emitted when the navigation bar item gains focus.

Emitted when the navigation bar item loses focus.

Name

Text.

Icon.

Icon for the active state.

Badge.

Name

Container for the navigation item.

Indicator.

Badge.

Icon.

Icon for the active state.

Text.

Name

The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons