{"id":8258,"date":"2024-09-25T22:06:38","date_gmt":"2024-09-25T16:36:38","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8258"},"modified":"2024-09-25T22:06:46","modified_gmt":"2024-09-25T16:36:46","slug":"adding-breadcrumbs-to-a-web-page","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/adding-breadcrumbs-to-a-web-page\/","title":{"rendered":"Adding Breadcrumbs to a Web Page"},"content":{"rendered":"\n

A breadcrumb is a secondary navigation scheme that helps to find the user’s location in a website or web application. A breadcrumb menu or trial usually appears in a horizontal line at the top of user’s current page in the form of clickable links.<\/p>\n\n\n\n

We should use breadcrumbs for large websites with hierarchically arranged pages. The best example will be an e-commerce website which includes a large variety of products grouped under subcategories.<\/p>\n\n\n\n

We should not use breadcrumbs for single-level websites that have no logical hierarchy or grouping.<\/p>\n\n\n\n

Breadcrumb navigation should be considered as an extra feature and should not replace existing primary navigation menus.<\/p>\n\n\n\n

Types of Breadcrumbs:<\/em><\/strong><\/p>\n\n\n\n

    \n
  1. Location-Based<\/strong>: Location-Based breadcrumbs show the user where they are in the websites hierarchy. They are used for navigation schemes which has multiple levels.<\/li>\n\n\n\n
  2. Attribute-Based<\/strong>: Attribute-Based breadcrumbs displays the attributes of the page. For example, if products are available on that page, it will display them on the menus.<\/li>\n\n\n\n
  3. Path-Based<\/strong>: Path-based breadcrumbs show the users step they have taken to arrive on that particular page.<\/li>\n<\/ol>\n\n\n\n

    Some points to noted for using breadcrumbs:<\/strong><\/p>\n\n\n\n

      \n
    1. Display full breadcrumb trial.<\/li>\n\n\n\n
    2. Always start with homepage.<\/li>\n\n\n\n
    3. Use ‘>’ as a separator between the levels.<\/li>\n\n\n\n
    4. Put breadcrumbs at the top of the page.<\/li>\n\n\n\n
    5. Boldface the last item and don’t hyperlink it.<\/li>\n\n\n\n
    6. Avoid using on homepage.<\/li>\n<\/ol>\n\n\n\n

      How to use breadcrumbs in a React project?<\/strong><\/p>\n\n\n\n

      We can create breadcrumbs as a reusable component and call them on all pages. We can add an interface if we want to add any extra functionalities.<\/p>\n\n\n\n

      \"\"<\/a><\/figure>\n\n\n\n

      Here we are displaying the pathname after the homepage text. This will be grouped under path-based breadcrumbs.<\/p>\n\n\n\n

      \"\"<\/a><\/figure>\n\n\n\n

      We just need to import the component in respective pages and use them where we need, which is usually at the top.<\/p>\n\n\n\n

      import PheonixBreadcrumbs from “..\/Components\/PheonixBreadcrumbs”;<\/p>\n\n\n\n

      <PheonixBreadcrumbs \/><\/p>\n\n\n\n

      Benefits of Breadcrumbs:<\/em><\/strong><\/p>\n\n\n\n

        \n
      1. Convinient for users<\/li>\n\n\n\n
      2. Reduces clicks or actions to return to hign-level pages<\/li>\n\n\n\n
      3. Doesn’t hog screen space.<\/li>\n\n\n\n
      4. Reduces bounce rates<\/li>\n<\/ol>\n\n\n\n

        Conclusion:<\/strong><\/p>\n\n\n\n

        We learned how to use breadcrumbs and the purpose of it.<\/p>\n","protected":false},"excerpt":{"rendered":"

        A breadcrumb is a secondary navigation scheme that helps to find the user’s location in a website or web application. […]<\/p>\n","protected":false},"author":502,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-8258","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-29c","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/502"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=8258"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8258\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=8258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=8258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=8258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}