Breadcrumbs

v-breadcrumbs コンポーネントはページ用のナビゲーションヘルパーです。Material Icons のアイコン、もしくは文字を区切りとして使用できます。hreftext そして任意で disabled を含んだオブジェクトの配列を items プロパティに渡すことができます。 加えて、 Breadcrumbs をより細かく制御するために slot を使用したり、v-breadcrumbs-item や他のカスタムマークアップを利用することができます。

Usage

By default, breadcrumbs use a text divider. This can be any string.

API

v-breadcrumbs
Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
divider
Default
'/'
Type
string

区切り文字を指定します。

Name
items New in — v1.2
Default
[]
Type
array

Components.Breadcrumbs.

Name
justify-center Deprecated in — v1.2
Default
false
Type
boolean

Breadcrumbs を中央寄せにします。

Name
justify-end Deprecated in — v1.2
Default
false
Type
boolean

Breadcrumbs を右側寄せにします。

Name
large
Default
false
Type
boolean

Breadcrumbs の項目のテキストを大きくします。

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Examples

アイコン区切り

icon 変数を使用することで、 Material Design Icon に存在するアイコンを Breadcrumbs に使用することができます。

Item slot

You can use the scoped item slot to customize each breadcrumb.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore