Skip to main content

    Breadcrumbs

    The Breadcrumbs component can be used to indicate the location and hierarchy of the current page. It also allows users to easily navigate back to a higher level in the hierarchy.

    OverviewPropertiesUsage

    Import​

    import { Breadcrumbs } from '@dynatrace/strato-components-preview/navigation';

    Use cases​

    CodeSandbox

    Disable an item​

    The disabled prop disables a Breadcrumbs.Item, making it unclickable.

    CodeSandbox

    Use the Breadcrumbs with React Router​

    The Breadcrumbs.Item is a polymorphic component and can also be used as a React Router link.

    CodeSandbox

    Use the Breadcrumbs inside a Flex component​

    When using the Breadcrumbs component inside a Flex component, make sure to set flexGrow and minWidth as shown in the example. Otherwise, the responsive collapsing and resize behavior won't work as the available space can't be calculated correctly.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community