---
title: "How to design the categories of a section | Tutorials - GoodBarber"
description: "CategoriesWhen a section has categories, your readers switch between them at the top of the list. You choose how they look, and what the header shows.In My App, open Structure… and click the section,…"
canonical_url: "https://www.goodbarber.com/tutorials/design/how-to-design-the-categories-of-a-section/"
lang: en
---

# How to design the categories of a section | Tutorials - GoodBarber

[Back](https://www.goodbarber.com/tutorials/)

# How to design the categories of a section

## Categories

When a section has categories, your readers switch between them at the top of the list. You choose how they look, and what the header shows.

In My App, open Structure… and click the section, here Sports.

Its categories are created in the section's settings, behind the gear. Their design is here: click Categories.

## Templates

There are four templates. Tags, the current one, shows each category in a rounded cell.

Choose Labels… and the categories become plain titles, underlined when selected.

Choose Filters… and the bar lists the categories only. As the panel says, the list shows the articles of All by default.

Choose Dropdown… and the categories move into a menu, with an arrow on each side.

## Header title

With Dropdown, you also choose the title of the header: Section & category title, Section title only, or Categories only.

Choose Categories only… and the header shows the category, All, instead of Sports.

## Colors and fonts

Back to Tags. Each template has its own settings.

Colors come in two states, Not selected and Selected. Here, a new color for the selected cell… and the current category stands out in black.

Next to each font, this icon sets the size for each screen: mobile, tablet and computer.

A larger size on mobile… and the categories are easier to read.

## Publish

To make your changes visible to your users, publish your app's update from the Publish menu.

## Related videos

[DesignHow to set up your header](/tutorials/design/how-to-set-up-your-header/)

![How to set up your header](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignHow to set up your app style](/tutorials/design/how-to-set-up-the-global-style-of-your-app/)

![How to set up your app style](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignHow to customize the launch screen of your app](/tutorials/design/how-to-customize-the-splashscreen-of-your-app/)

![How to customize the launch screen of your app](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignHow to set up the navigation menu of your app](/tutorials/design/how-to-set-up-the-navigation-mode-of-your-app/)

![How to set up the navigation menu of your app](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignHow to customize the icons of your menu](/tutorials/design/how-to-customize-the-icons-of-your-menu/)

![How to customize the icons of your menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignHow to design your sections](/tutorials/design/how-to-design-your-sections/)

![How to design your sections](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignHow to copy the design of a section](/tutorials/design/how-to-copy-the-design-of-a-section/)

![How to copy the design of a section](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignHow to set up your home page](/tutorials/design/how-to-set-up-your-home-page/)

![How to set up your home page](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignHow to choose your header size ?](/tutorials/design/how-to-choose-your-header-size/)

![How to choose your header size ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)