> For the complete documentation index, see [llms.txt](https://modernpress-io.gitbook.io/modernpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modernpress-io.gitbook.io/modernpress/widgets/categories.md).

# Categories

### **Introduction**

The **Category Tabs Widget** in **ModernPress** allows you to display posts dynamically based on selected categories. Users can easily filter posts by clicking on category tabs, making it a perfect solution for blogs, news websites, and content-heavy pages.

***

**Key Features:**

\
✅ 4 Unique Tab Styles\
✅ Post Filtering by Category (No Page Reload)\
✅ Customizable Layout & Styling\
✅ Dynamic or Manually Selected Categories\
✅ Full Typography & Color Control

***

### Adding the Category Tabs Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.
{% endstep %}

{% step %}
Edit a page with **Elementor**.
{% endstep %}

{% step %}
Search for **"Category Tabs"** in the **ModernPress Widgets** panel.

<figure><img src="/files/2uMXTESG0Nd15E4BkQET" alt=""><figcaption></figcaption></figure>

{% endstep %}

{% step %}
Drag and drop the widget into your section.
{% endstep %}

{% step %}
Select the categories you want to display and customize the layout.

<figure><img src="/files/uUicZE8Bo0kiRSsWo4mO" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### **Layouts Overview**

#### **Layout 1 - Standard Tabs**

📌 Classic tabbed navigation with a clean and structured look.\
🎨 Best for **blogs, news sites, and knowledge bases**.

<figure><img src="/files/rmdkqR5oZIwT2coh7Q7R" alt=""><figcaption></figcaption></figure>

#### **Layout 2 - Underline Tabs**

📌 Tabs are highlighted with an animated underline on selection.\
🎨 Ideal for **modern and professional website designs**.

<figure><img src="/files/HCLmoLsAILh9LDyGagV3" alt=""><figcaption></figcaption></figure>

#### **Layout 3 - Pill-Style Tabs**

📌 Rounded, button-like tabs for a sleek and stylish appearance.\
🎨 Great for **interactive and engaging content layouts**.

<figure><img src="/files/v2uUKrQmmo5Z2jCMeVbl" alt=""><figcaption></figcaption></figure>

#### **Layout 4 - Boxed Tabs**

📌 Each tab is enclosed in a box for a structured, card-like effect.\
🎨 Works well for **eCommerce, portfolios, and magazine-style layouts**.

<figure><img src="/files/Im3oe4ecAesnLdBpnrwx" alt=""><figcaption></figcaption></figure>

***

### **Customization Options**

#### **Content Settings**

📌 **Select Categories** – Choose which categories to display as tabs.\
🔄 **Filter Type** – Ajax-based filtering for smooth transitions.\
📰 **Post Display Options** – Show featured image, title, meta info, and excerpt.

<figure><img src="/files/uUicZE8Bo0kiRSsWo4mO" alt=""><figcaption></figcaption></figure>

#### **Style Settings**

🎨 **Tab Styles** – Choose from default, underlined, pill, or boxed styles.\
📏 **Typography & Colors** – Customize text, background, and hover effects.\
🔲 **Spacing & Alignment** – Adjust tab positioning and layout gaps.\
✨ **Animation Effects** – Enable smooth transitions when switching tabs.

<figure><img src="/files/iEFwSdbmgaThb9UkiZiP" alt=""><figcaption></figcaption></figure>

#### **Advanced Features**

📱 **Responsive Adjustments** – Optimize for mobile and tablet displays.\
⚡ **Lazy Loading** – Load posts dynamically for faster performance.

***

### FAQs

<details>

<summary>Can I change the default selected tab?</summary>

Yes! In the **Content Settings**, you can choose which category tab is active by default.

</details>

<details>

<summary>Does the filtering require a page reload?</summary>

No, the widget uses **AJAX filtering**, allowing instant post updates without refreshing the page.

</details>

***

### **Need Help?**

For support, contact us at <support@modernpress.com>.