The QBreadcrumbs component is used as a navigational aid in UI. It allows users to keep track of their location within programs, documents, or websites. Most common use is in a QToolbar, but it’s not limited to it.

Usage

Basic

Design

Connecting to Vue Router

The examples below won’t work with UMD version (so in Codepen/jsFiddle too) because they depend on Vue Router.

You can also delay, cancel or redirect navigation, as seen below. For a more in-depth description of the @click event being used below, please refer to QBreadcrumbsEl API card at the top of the page.