전체 카탈로그
NavigationBreadcrumbs5 props

Breadcrumbs

Breadcrumbs show a trail of links from the root to the current page. Use them at the top of detail pages, settings panels, or anywhere the user needs to see where they are and n...

공식 문서 열기
live previewNavigation

Preview

Import

import {Breadcrumbs} from '@astryxdesign/core/Breadcrumbs';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

Breadcrumbs show a trail of links from the root to the current page. Use them at the top of detail pages, settings panels, or anywhere the user needs to see where they are and n...

breadcrumbsbreadcrumbnavigationnavcrumbstrailpathhierarchy

Important props

variantdefault | supportingoptional

Theming targets

astryx-breadcrumb-itemastryx-breadcrumbs

Best practices

  • DoPlace breadcrumbs above the page heading so the user sees their location before reading the content.
  • DoKeep labels short and match the page titles they link to: "Settings" not "Application Settings Page".
  • DoUse the supporting variant in dense UIs like admin panels or sidebars where the breadcrumb should be subtle.
  • DoMake the last item plain text, not a link; it represents the current page. The component does this automatically when you set isCurrent.