Navbar

You can inspect the application navbar from vendor/vue-luma/components/Navbar/Navbar.vue.

Configure the application navbar skin from store/settings.js. Possible values are light and dark. The values correspond to configuration keys in store/navbarConfig.js.

export const state = () => ({
  state: {
    'default::mainNavbar': {
      navbar: 'light'
    }
  }
})

Layout Settings

We can have different settings per layout. The following example configures the application navbar skin for the fixed layout.

export const state = () => ({
  state: {
    'fixed::mainNavbar': {
      navbar: 'dark'
    }
  }
})

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

App Navbar Skin

Layout Settings

Themes

Templates

Company