Astra Theme Tutorial: How to Add Breadcrumb Navigation on Astra Theme

Astra Built-in flexible breadcrumb feature with support for custom position, color, font and other style settings. In this article, we will show you how to enable Astra breadcrumb feature by hand and introduce how to use it with theMainstream SEO Plugins(e.g. Yoast, Rank Math, etc.).

Why use breadcrumb navigation?

crumbis a form of navigation used to show the user's path through a page, usually appearing at the top of the page. Example:Home > Blog > Tutorials > How to set up breadcrumb navigation

Benefits of using breadcrumbs::

• Enhanced navigation experience: Helps the user quickly return to the parent page or section.
• Enhanced SEO: It helps to optimize the internal link structure, and Google often displays breadcrumb paths in the search results.
• Reduce bounce rate: Easier for users to find other relevant pages and extend the length of their visit.

How to enable breadcrumb navigation in Astra?

Astra has a built-in breadcrumb feature that can be enabled with a simple setup.

Step 1: Choose where the breadcrumbs will be displayed

Operation Path:Appearance > Customize > Breadcrumb

Display position that can be set:

• None(not shown)
• Inside Header(shown inside the header)
• After Header(shown after the header)
• Before Title(shown before the title)

Select where you want the breadcrumbs to be displayed for immediate effect.

Step 2: Choose a breadcrumb source

Astra supports multiple breadcrumb sources:

• Default: Using Astra's own features
• plug-in integration: If you have plugins such as Rank Math or Yoast SEO installed, you can choose to get breadcrumb content from these plugins

Recommendation: If you're already using the Yoast SEO or Rank Math plugins to handle SEO, you can generate breadcrumbs directly with these plugins for better overall optimization consistency.

Step 3: Optional Disable Page

You can choose whether or not to display breadcrumb navigation depending on the type of page:

Page Type	instructions
Disable on Hame Page	Home Page
Disable on Blog / Posts Page	Article archive page
Disable on search	User search results page
Disable on Archive page	Categorization, tagging, author archiving, etc.
Disable on Single Page	Usually a single page such as "About Us".
Single Post (Disable on Single Post)	Blog Content Page
Generic Single (Disable on Singular)	All individual content items such as posts/pages
Disable on 404 Page	error page

You just need to check the box that requiresDisable breadcrumbsThe page type of the page is sufficient.

Step 4: Design Style and Typography

Astra Free EditionA variety of style setting options are provided in the

• alignment: left-aligned, centered, right-aligned
• spacing: Setting Top and Bottom Margins
• Color Customization: Text color and hover color can be set
• font setting: include font size, thickness, line height, case style (lowercase, uppercase, initial capitalization), etc.

These options can be flexibly adjusted in the Settings panel under "Breadcrumb" to better suit your site's style.

Third-party plug-in integration tutorial

1. Yoast SEO plugin integration method:

• Installation and activation Yoast SEO Plugin
• Enable breadcrumbs: backend entry SEO > Search Appearance > Breadcrumbs > Enabled
• Back to the customizer:Customize > Layout > Breadcrumbs > Source Selection Yoast SEO
• Astra will display the breadcrumbs generated by Yoast, while you can control the colors, fonts, display position, etc. via the customizer!

2. Rank Math plug-in integration methodology:

• Installation and activation Rank Math Plugin
• exist Rank Math > General Settings > Breadcrumbs Enable breadcrumbs in
• Go back to the Astra Customizer and select Rank Math As a source of breadcrumbs
• Rank Math breadcrumbs will be displayed on the page, and the style will still be controlled by Astra.

summarize

Astra provides a built-in breadcrumb function, users do not need to install additional plug-ins can be quickly enabled, and freely adjust the display position, style, font and other settings. If you want to know more WordPress related tutorials and information, please pay attention to thePhoton fluctuation network, has the most comprehensive WordPress tutorials and the most activeWordPress Exchange CommunityThe

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off