Radunia components

QNavbar component

QNavbar allows for quick and dynamic creation of navbars. This component comes with two slots to place navigation items in:

  • v-slot:navbar-left
  • v-slot:navbar-right

It uses the standard variants and is fully responsive.

Styling

Available variants

To be assigned with variant binding

  • primary: Uses CSS color --accent-color-primary
  • secondary: Uses CSS color --accent-color-secondary
  • info: Uses CSS color --color-info
  • success: Uses CSS color --color-success
  • warning: Uses CSS color --color-warning
  • error: Uses CSS color --color-error
  • dark: Uses CSS color --black-color
  • bright: Uses CSS color --white-color

Requirements

Local CSS

This component uses a CSS module for styling the navbar wrapper, as well as its nested elements.

TypePath / VersionPurposeOptional
Styles../../assets/main.cssCSS VariablesNo
Styles../../components/Navigation/Navbar/navbar.module.cssNavbar & Navbar item stylesNo

Usage

import QNavbar from '../../components/Navigation/Navbar/QNavbar.vue';
import QNavbarItem from '../../components/Navigation/Navbar/QNavbarItem.vue';

Basic usage

By default, the navigation bar has the defined primary color set. The text color switches with the currently active theme,

Example

<template>
  <q-navbar logo="https://blog.q-bit.me/content/images/2021/07/icon_q-bit.png" alt="Radunia" >
    <template v-slot:navbar-left>
      <q-navbar-item>Nav 1</q-navbar-item>
      <q-navbar-item>Nav 2</q-navbar-item>
      <q-navbar-item>Nav 3</q-navbar-item>
    </template>
    <template v-slot:navbar-right>
      <q-navbar-item>Nav 4</q-navbar-item>
      <q-navbar-item>Nav 5</q-navbar-item>
    </template>
  </q-navbar>
</template>

Variants & coloring

Coloring can be customized using variant binding

Primary(default)

Secondary

Info

Success

Warning

Error

Dark

Bright