Vue MDBootstrap

Appearance

List Nav ​

BsListNav is a component used for displaying a series of item and mainly used for navigation. It can contain an icon, nested items, and provides a consistent styling for organizing the items. But doesn't have the flexibility like BsListTile.

Overview ​

<bs-list-nav> is a component to create the navigation container and <bs-list-nav-item> is used to create the navigation menu. <bs-list-nav> needs to be placed inside <bs-list-view>, then use <bs-list-nav-item> to compose the navigation menus. The navigation menus created by <bs-list-nav-item> has consistent styling and meets the Material Design specifications.

TIP

See BsIcon to learn more about how to apply the Google Material Icons to icon property.

INFO

Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.

Styling ​

Color ​

We can also make <bs-list-nav> to have a background color other than white. To achieve this, we need to set the color property of <bs-list-view> component to the desired color name.

Updated on v2.0.0

TIP

Any MDBootstrap Color variants and Material Color variants can be applied to the color property.

Outer padding ​

Additionally, we can also add predefined outer padding on the left or right side of the navigation menus. To create the padding, sets the space-around property of the <bs-list-view> component with value: left, right or both.

Item border ​

We can also give a border to the active navigation's menu. To achieve this, sets the item-border-variant property of <bs-list-view> component with value: left, right, left-right, top, bottom, or top-bottom.

Added since v2.0.0

Rounded style ​

Additionaly, we can also add additional style appearance to the navigation's menu. There are two built-in style appearance, which are: Rounded and Rounded Pill. To achieve this, sets the item-rounded property of <bs-list-view> explicitly to create rounded style, or item-rounded-pill to create rounded pill style to an active navigation menu.

Added since v2.0.0

Usage Example ​

The following are a collection of examples that demonstrate more advanced use of the <bs-list-nav>.

Nested navigation ​

To create nested navigation list, the child navigation list needs to be wrapped by <bs-list-nav> and placed inside current <bs-list-nav-item>. Optionally, we can define the depth or indent property to customize the indentation from the left side.

Mixed with List Tile ​

<bs-list-nav> can also be mixed with <bs-list-tile> to display custom and fine tune navigation menus.

Inside Side Drawer ​

<bs-list-nav> can also be used inside <bs-side-drawer> to create side navigation menus.

CSS Variables ​

Added since v2.0.0

List View ​

scss
--md-listview-padding-x: 0;
--md-listview-padding-y: 0.5rem;
--md-listview-bg: #{$color};

List Nav ​

scss
--md-nav-item-padding-x: 1rem;
--md-nav-item-padding-y: 0.25rem;
--md-nav-item-line-height: normal;
--md-nav-item-font-size: 1rem;
--md-nav-item-font-weight: 400;
--md-nav-item-color: #{$tile-title-color};
--md-nav-item-divider-color: #{$divider-color};
--md-nav-item-icon-color: #{$tile-leading-color};
--md-nav-item-expanded-bg: #{$nav-item-expanded-bg};

--md-nav-item-active-bg: #{$tile-active-bg};
--md-nav-item-active-color: #{$tile-active-title-color};
--md-nav-item-active-icon-color: #{$tile-active-leading-icon-color};
--md-nav-item-active-font-weight: 500;

--md-nav-item-disable-color: #{$tile-disable-title-color};
--md-nav-item-disable-icon-color: #{$tile-disable-leading-color};
--md-nav-item-hover-bg: #{$tile-hover-bg};

API Reference ​

BsListView ​

BsListNav ​

BsListNavItem ​

Released under the BSD-3-Clause License.

Copyright © 2020-present • Ahmad Fajar