ContextBar

現在の位置と、関連する移動・操作を作業面の上部にまとめます。

現在地だけ

一つの主要操作

補助操作と主要操作

仕事場の案内

初めて利用する方へ。予約方法と、当日の受付についてご案内します。

利用する部屋と時間を選び、受付で予約名をお伝えください。

編集する

離れたフォームの送信とリセット

検索ボタンはフォームの外側にあります。

主操作とメニューを接続

前後の移動と追加操作

処理中と閲覧専用

閲覧権限のみの場合は、操作できない理由を本文にも示します。

狭い作業面と長い現在地

同じ画面内の小さな作業面でも、現在地と操作を省略せずに折り返します。

本文とContextBarを、同じ作業面の中で組み合わせた例です。

空白のない識別子が届いても、操作を横へ押し出しません。

右から左へ書く言語

使いどころ

  • 作業面の上端で、現在地のパンくずと、その対象への移動・操作をまとめる時に使います。
  • パンくずだけを置く時はBreadcrumb、一つ上へ戻るだけならBackLinkを使います。
  • Toolbarは関連する複数の操作、ContextBarは現在地とその対象の操作をまとめます。操作のグループにキー操作が要る時は、ContextBarの中にToolbarを置きます。

使い方

itemsで現在地までの階層を渡し、childrenにButton・ActionLink・Toolbar・ButtonGroup・DropdownMenuなどを置きます。操作はバーの末尾側に寄ります。

主要な操作は一つに絞り、補助操作の後に置きます。移動はActionLink、フォームの送信や画面内の操作はButtonを使います。フォームの外から送信・リセットする時は、Buttonのform属性に対象のフォームのidを渡します。

現在地は灰色の小さな文字(12px)で先頭側に置き、バーの下に1px #dedede の罫線を引いて、ここから中身が始まることを示します。バーの高さは操作の有無で変えません。幅が足りない時は現在地、操作の順に折り返し、長い名前や空白のない識別子も折り返します。

Surfaceと組み合わせる時はcontextに渡します。Surfaceの上端に、本文と同じ左右の余白で置き、下の区切り線を消します。AppShellの作業面の先頭に置いた時も同じく、見出しと同じ左右の位置に置いて区切り線を消し、作業面の上の余白を詰めます。

アクセシビリティ

  • 現在地はBreadcrumbのnavで出し、labelがその読み上げ名になります。最後の項目にaria-current="page"を付けます。
  • バー全体にはrole="menu"やrole="toolbar"を付けません。
  • 無効な操作を置く時は、操作できない理由を本文にも示し、aria-describedbyなどで関連付けます。

API

ContextBar

ContextBarのprops
名前型既定値説明
items必須readonly BreadcrumbItem[]現在地までの階層。Breadcrumbのitemsと同じで、最後の項目が現在地になる。
labelstring"現在の位置と関連する操作"現在地を示すnavの読み上げ名。
childrenChildバーの末尾側に置く操作。Button・ActionLink・Toolbar・ButtonGroup・DropdownMenuなどを渡します。

ほかに、<div>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/context-bar.css、components/breadcrumb.css

BreadcrumbItem

BreadcrumbItem
名前型既定値説明
label必須string階層の名前。
hrefstring戻り先のURL。最後の項目(現在地)では渡してもリンクにしない。省略するとリンクのない文字になる。

コード

HTML
Hono JSX