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.

INFO

Styling ​

Custom Color ​

We can also make <bs-list-nav> to have different background color. To achieve this, just style the parent container with the desired background color then use local CSS variables to set the navigation's item color or use global CSS variables for consistent application UI color.

Updated in v2.2.0

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 in 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 in 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 ​

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables and global CSS variables for better customization.

Updated in v2.2.0

List View ​

scss
.md-list {
  --md-listview-bg: inherit;
  --md-listview-color: var(--navigation-item-foreground);
  --md-listview-item-gap: 0;
  --md-listview-padding-x: 0;
  --md-listview-padding-y: #{vars.$padding-sm};

  --md-tile-minheight: 2.5rem;
  --md-tile-action-minwidth: 1.5rem;
  --md-tile-spacing-x: #{vars.$padding-sm};
  --md-tile-spacing-y: 0.375rem;
  --md-tile-padding-x: #{vars.$padding-md};
  --md-tile-padding-y: #{vars.$padding-sm};
  --md-tile-subtitle-font-size: #{math.div((vars.$font-size-base * 90), 100)};
  --md-tile-title-font-size: var(--font-size-default);
  --md-tile-title-font-weight: var(--font-weight-normal);
  --md-tile-active-title-font-weight: var(--font-weight-medium);
  --md-tile-disabled-opacity: var(--md-field-readonly-opacity);
  --md-tile-indicator-border-color: var(--navigation-item-border-indicator);
  --md-tile-indicator-border-width: 4px;

  --md-nav-item-padding-x: #{vars.$padding-md};
  --md-nav-item-padding-y: #{vars.$padding-xs};
  --md-nav-item-line-height: normal;
  --md-nav-item-font-size: var(--font-size-default);
  --md-nav-item-font-weight: var(--font-weight-normal);
  --md-nav-item-active-font-weight: var(--font-weight-medium);
  --md-nav-item-disabled-opacity: var(--md-field-readonly-opacity);
}

List Nav ​

css
.md-list-nav {
  --md-nav-item-color: var(--navigation-item-foreground);
  --md-nav-item-icon-color: var(--navigation-item-foreground-subtle);
  --md-nav-item-divider-color: var(--border-translucent);
  --md-nav-item-active-bg: var(--navigation-item-active-background);
  --md-nav-item-active-color: var(--navigation-item-active-foreground);
  --md-nav-item-active-icon-color: var(--navigation-item-active-foreground-secondary);
  --md-nav-item-expanded-bg: var(--navigation-item-expanded-background);
  --md-nav-item-hover-bg: var(--navigation-item-hover-background);
}
scss
:root {
  --navigation-background: var(--background-secondary);
  --navigation-item-foreground: var(--foreground);
  --navigation-item-foreground-secondary: var(--foreground-subtle);
  --navigation-item-foreground-subtle: var(--foreground-subtle-secondary);
  --navigation-item-active-background: #{vars.$default-active-bgcolor};
  --navigation-item-active-foreground: #{helper.to-oklch(
      color.change(color.scale(vars.$default-active-bgcolor, $lightness: -10%), $alpha: 1)
    )};
  --navigation-item-active-foreground-secondary: #{helper.to-oklch(
      color.change(color.scale(vars.$default-active-bgcolor, $lightness: -10%), $alpha: 0.75)
    )};
  --navigation-item-hover-background: #{vars.$default-hover-bgcolor};
  --navigation-item-hover-foreground: var(--foreground);
  --navigation-item-hover-foreground-secondary: #{colors.$gray-600};
  --navigation-item-expanded-background: oklch(0 0 0 / 0.025);
  --navigation-item-border-indicator: var(--md-field-active-indicator);
}

SASS mixins ​

Sometimes, simply creating a new ListNav color variant can be overwhelming, as there are too many CSS variables to modify. For cases like this, Vue MDBootstrap provides SASS mixins to help you create new ListNav color variants.

scss
use 'vue-mdbootstrap/scss/mixins/listview';

@include listview.make-listview-variant($name, $color);

API Reference ​

BsListView ​

BsListNav ​

BsListNavItem ​

Released under the BSD-3-Clause License.

Copyright © 2020-present • Ahmad Fajar