Introduction

The Filter Bar shows the categories of a section above its list, when the section holds several categories of content. It lets the reader move from one category to the next, and it exists for every type of content.

It comes in four templates, Tags, Labels, Filters and Dropdown, chosen in the Categories panel of the section. Tags and Labels share the same behavior and differ by their design. The Filters template narrows the list down instead of browsing it, and the Dropdown template gathers the categories in a list that opens on demand.

Anatomy

One line of categories

With Tags, Labels and Filters, the categories sit on a single line, in a band placed above the list. The band has 1G of padding on every side, and the categories are 4px apart. The row never wraps on two lines. When it is wider than the screen, it scrolls sideways. In the back office, the row is aligned to the left or centered, and with Tags and Labels it goes back to the left as soon as it is wider than the screen.

Tags

With Tags, each category is a small shape around its name. The selected tag and the others have their own background, border and text color.

Labels

Labels keep the behavior of Tags with a lighter design. The names stand on the band without any background, and the selected one is underlined with a thin line in a color of its own, which grows from the center of its name.

Filters

With Filters, the first category of the section is the default list, and it is never displayed as a filter. A tap on a filter selects it. The other filters disappear, and a close icon appears on its left, 4px away, to come back to the whole list.

Dropdown

Dropdown shows a single bar above the list, the full width of the screen, with the name of the selected category in its center, next to a down arrow. A tap on the bar opens the list of all the categories below it, one per line, and the arrow turns over. On each side of the bar, an arrow moves to the previous or the next category.

Properties

Colors

For Tags and Filters, the back office sets the background of the band and, for the categories, the background, the border and the text color, selected and not selected. For Labels, it sets the background of the band, the color of the names and the color of the underline. By default the band is transparent, and shows the background of the app behind it, a Color, a Gradient or an image. For Dropdown, the back office sets the background of the bar and of its list, and the color of the names.

Shape and shadow

Tags and Filters follow the Shape of the app. For Labels, the Shape applies to the underline. The Shadow, when it is enabled in the panel, applies to the selected tag only, and only when it has a background or a border. With Filters, it applies to every filter that has a background or a border. The Dropdown bar keeps square corners and no shadow.

Layout

Placement

The Filter Bar sits above the list of a section, right under its header. When the header hides on scroll, the band moves to the top of the screen and stays fixed. In some layouts, it sits over the image at the top of the list. The Favorites section has a Filter Bar too, which filters the favorites by type of content, above its Sorting Bar.

Behavior

Browsing and filtering

With Tags and Labels, the reader taps a category, or swipes the list sideways. The band follows the list, and selects the category that is displayed. With Filters, the list does not swipe. A tap selects a filter, and a tap on its close icon brings the whole list back. With Dropdown, the reader picks a category in the list, or moves from one to the next with the arrows of the bar.