Analysis of breadcrumb usage scenarios on websites

The picture below is SAP Spartacus E-commerce cloud UI Of breadcrumb Angular Cloud Portal Source code .Component Of crumbs$ data , Through structured instructions *ngFor an , And then through span and a Label rendering .

breadcrumb Of Component The area is limited to this ：

“breadcrumb”（ or “breadcrumb trail”） It's a two-level navigation scheme , Used to show users on websites or Web Location in the application . The word comes from Hansel and Gretel's fairy tale , Two of the children with titles threw crumbs under them , Form a way home . Just like in the story , In real-world applications breadcrumb It provides users with a way to track the path back to their original landing point .

The picture below is Spartacus in breadcrumb Specific navigation path , adopt Sony->Camera Flashes->Home Click in turn , You can go back to home page , This process is very intuitive .

You can usually find... In websites that organize large amounts of content in a hierarchical manner breadcrumb. You can also work in a multi-step Web See them in the application , Their function is similar to the progress bar . In the simplest form ,breadcrumb Are horizontal text links ( It's like SAP Spartacus), Separated by some special symbol ( such as Spartacus Medium /); The symbol indicates the link level of the page relative to the page next to it .

When should I use it breadcrumb？

For large websites and websites with hierarchical pages breadcrumb Navigation . E-commerce website is a good scene , A large number of products are grouped into logical categories .

Contrary , You should not breadcrumb For single level websites without logical hierarchy or grouping . Determine whether the website will be from breadcrumb A good way to benefit from navigation is to build a site map or a chart representing the navigation architecture of the site , Then analysis breadcrumb Whether it will improve the ability of users to navigate within and between categories .

breadcrumb Navigation should be considered as an additional function , Should not replace a valid main navigation menu . This is a convenient function ; Auxiliary navigation scheme , Allow users to determine their location ; And another way to browse your website .