ブレッドクラム

現在のページの場所をナビゲーション階層内に示し、CSSで自動的にセパレーターを追加します。

例

アクティブBreadcrumb.Itemにactiveプロパティを追加します。 active属性とhref属性を両方セットしないでください。 activeはhrefをオーバーライドし、aではなくspan要素がレンダリングされます。

結果

ロード中...

ライブエディター

import Breadcrumb from 'react-bootstrap/Breadcrumb'; function BreadcrumbExample() { return ( <Breadcrumb> <Breadcrumb.Item href="#">Home</Breadcrumb.Item> <Breadcrumb.Item href="https://bootstrap.dokyumento.jp/docs/4.0/components/breadcrumb/"> Library </Breadcrumb.Item> <Breadcrumb.Item active>Data</Breadcrumb.Item> </Breadcrumb> ); } export default BreadcrumbExample;

import Breadcrumb from 'react-bootstrap/Breadcrumb';

function BreadcrumbExample() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
      <Breadcrumb.Item href="https://bootstrap.dokyumento.jp/docs/4.0/components/breadcrumb/">
        Library
      </Breadcrumb.Item>
      <Breadcrumb.Item active>Data</Breadcrumb.Item>
    </Breadcrumb>
  );
}

export default BreadcrumbExample;

API

Breadcrumb

BreadcrumbItem