Zum Hauptinhalt springen

Breadcrumb

Breadcrumb in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum richtigen Design eines Breadcrumb und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Fügen Sie eine sekundäre Navigationskomponente hinzu, um dem Benutzer seine aktuelle Position in Bezug auf übergeordnete Ebenen anzuzeigen.

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Beispiel für letztes Element anklickbar​

Standardmäßig ist das letzte Element kein anklickbarer Link. Sie können dies jedoch mit der Eigenschaft lastItemClickable ändern.

<Breadcrumb
  lastItemClickable={true}
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Wenn es nur ein übergeordnetes Element gibt, wird die Komponente als Link mit dem Text „Zurück“ und einem nach links weisenden Pfeil gerendert.

<Breadcrumb
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Beispiel für einen Rückverweis ohne Text​

Wenn es nur ein übergeordnetes Element gibt und die Eigenschaft backLinkWithoutText true ist, wird die Komponente nur als nach links weisender Pfeil gerendert.

<Breadcrumb
  backLinkWithoutText={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>