Tabs | Quasar Framework (2024)

Tabs are a way of displaying more information using less window real estate. This page describes the tab selection part through QTabs, QTab and QRouteTab.

One common use case for this component is in Layout’s header/footer. Please refer to Layouts and for references.

Usage

Basic

Outside, inside and visible on mobile arrows

Vertical

Dense

Individual colors

Ripple

Custom indicator

In the examples below, please notice the last two QTabs: indicator at top and no indicator.

Tab notifications

There are multiple ways to display tab notifications: with a QBadge, through an alert dot or an alert icon (can be any).

Alignment

QTabs are responsive and the align prop (see below) becomes active when the container width (not window width) is bigger than the configured breakpoint. For demoing purposes, the tabs below have breakpoint disabled.

In the second QTabs from the example below, if window width is below 1024px then the “Movies” and “Photos” tabs will be replaced by a “More…” dropdown.

With dropdown

On QToolbar

Notice we need to specify the shrink prop. By default, QTabs tries to expand to all the available horizontal space, but in this case we are using it as a child of QToolbar so we don’t want that.

Dynamic update

Along with QTabsPanel

More info: Tab Panels.

Connecting to Vue Router

You can use tabs together with Vue Router through QRouteTab component. This component inherits everything from QTab, however it also has router-link properties bound to it. These allow for listening to the current app route and also triggering a route when clicked/tapped.

<q-tabs> <q-route-tab icon="mail" to="/mails" exact /> <q-route-tab icon="alarm" to="/alarms" exact /></q-tabs>

Matching QRouteTab to current route

updated for v2.9+

• If it is set to exact matching:
  1. The route that it points to must be considered “exact-active” by Vue Router (exactly matches route, disregards hash & query).
  2. Assuming Vue Router on history mode, it must match the configured route hash (if any)
  3. It must match the configured route query (if any) - any extra query params in the current route query will not make the tab active (should you want that, do not use exact)
• Else, if it is NOT set to exact matching:
  1. The route that it points to must be considered “active” by Vue Router (loosely matches route, disregards hash & query).
  2. Assuming Vue Router on history mode, is it configured with a hash? If so, it must match exactly.
  3. Is it configured with a query? If so, then the configured query must be included in the current route query.
  4. If multiple QRouteTab still match the current route (ex: route is /cars/brands/tesla and we have QRouteTabs pointing to non-exact /cars, non-exact /cars/brands, non-exact /cars/brands/tesla), then the most specific one that matches current route wins (in this case /cars/brands/tesla)
  5. If there are still multiple QRouteTabs matching the criteria above, then the one with the query that is closest to the current route query wins (has the configured query and the current route query has the least number of extra params).
  6. If there are still multiple QRouteTabs matching the criteria above, then the one with the resulting href that is the lengthier one wins.

The exact configured QRouteTabs always win over loose-matching (non-exact) ones.

Handling custom navigation

updated for v2.9+

<template> <q-tabs no-caps class="bg-orange text-white shadow-2" > <q-route-tab :to="{ query: { tab: '1' } }" exact replace label="Activate in 2s" @click="navDelay" /> <q-route-tab :to="{ query: { tab: '2' } }" exact replace label="Do nothing" @click="navCancel" /> <q-route-tab :to="{ query: { tab: '3' } }" exact replace label="Navigate to the second tab" @click="navRedirect" /> <q-route-tab :to="{ query: { tab: '4' } }" exact replace label="Navigate immediately" @click="navPass" /> </q-tabs></template><script>export default { setup () { function navDelay (e, go) { e.preventDefault() // we cancel the default navigation // console.log('triggering navigation in 2s') setTimeout(() => { // console.log('navigating as promised 2s ago') go() }, 2000) } function navCancel (e) { e.preventDefault() // we cancel the default navigation } function navRedirect (e, go) { e.preventDefault() // we cancel the default navigation // call this at your convenience go({ to: { query: { tab: '2', noScroll: true } }, // replace: boolean; default is what the tab is configured with // returnRouterError: boolean; default is false }) .then(vueRouterResult => { /* ... */ }) .catch(vueRouterError => { /* ...will not reach here unless returnRouterError === true */ }) } function navPass () {} return { navDelay, navCancel, navRedirect, navPass } }}</script>