Who This Is For / When to Use
This article is for users who want to:
Add category-based navigation to blogs
Enable search across blog categories
Improve blog discoverability and usability
Customize blog navigation styling and behavior
What the Category Navigation Element Does
The Category Navigation element:
Displays blog categories as a horizontal navigation bar
Allows users to filter blogs by category
Optionally includes a search bar
Works only when placed above a Blog element
Important Requirement:
For the navigation and search to function correctly, the Category Navigation element must be placed before the Blog element on the page.
Step 1: Add the Category Navigation Element
Open the Site Builder.
Click + Add Element.
Navigate to Blog.
Select Category Navigation.
Result:
The Category Navigation element is added to the page.
Step 2: Position the Element Correctly
Place the Category Navigation element above the Blog element.
Result:
The navigation bar will properly control blog filtering and search.
Step 3: Manage Category Navigation Items
Click the Category Navigation element to open settings.
You can:
Click + to add a category
Click Copy to duplicate a category
Click Trash to delete a category
Click the hamburger icon or category title to edit
Result:
You can fully manage category items from the General tab.
Step 4: Configure Individual Categories
When editing a category, you can:
Set the category title
Choose the destination category
Control whether it opens in a new tab
Result:
Each navigation item links to a specific blog category.
Step 5: Enable or Disable the Search Bar
In the General tab:
Toggle Include search bar on or off
Toggle Show Home Icon if desired
Result:
Visitors can search blog posts by keyword or category.
Step 6: Customize Typography and Colors
In the General tab, you can customize:
Desktop font size
Font weight
Line height
Text transform
Text and hover colors
Background color
Result:
The navigation matches your site’s design and branding.
Step 7: Adjust Styling, Visibility, and CSS Access
In the Styles tab, you can:
Add borders and shadows
Adjust spacing
Control Desktop and Mobile visibility
Access the CSS selector via Custom Class
Result:
Advanced styling and custom CSS control are available.
Step 8: Preview the Category Navigation
Use the Preview button to test behavior.
By default:
All blog posts appear
Social Sharing for Blogs
You can also enhance blog engagement by enabling Social Sharing options.
This allows:
One-click sharing to platforms like email, Facebook, LinkedIn, X, and Pinterest
Highlighted text sharing directly from blog content
Result:
Readers can quickly share full posts or highlighted excerpts.
Common Issues and Fixes
Navigation does not filter blogs
Ensure the Category Navigation element is placed above the Blog element.
Search bar is missing
Check the Include search bar toggle in the General tab.
Styling changes are not visible
Confirm changes were made in the correct tab (General vs Styles) and saved.
FAQ
Does the search bar automatically appear?
No. The search bar must be enabled manually in the General tab.
Can navigation links open in a new tab?
Yes. Each category item has an Open in New Tab option.
Why must the Category Navigation be above the Blog element?
The navigation controls the blog output. If placed below, filtering and search will not work.
Can I duplicate navigation items?
Yes. Use the Copy icon to duplicate any category item.
What happens if I delete a navigation item?
The category link is permanently removed from the navigation bar.
Where do I find the CSS selector for this element?
Open the Styles tab and scroll to Custom Class.
Can visitors search blog categories?
Yes. When enabled, the search bar filters blog posts by category and keyword.
Can readers share selected text from a blog?
Yes. Highlighted Share allows readers to select text and share it instantly.
How do I preview the navigation behavior?
Click Preview in the Site Builder. All blogs display by default.