--- title: "Filter Bar | GoodBarber's Design System" description: "The Filter Bar of GoodBarber apps shows the categories of a section above its list, as Tags, Labels, Filters or a Dropdown, to move from one to the next." canonical_url: "https://www.goodbarber.com/uxdesign/filter-bar/" lang: sv --- # Filter Bar | GoodBarber's Design System [Design System](https://se.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://se.goodbarber.com/uxdesign/](https://se.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.b5a5ae872a5d.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.5c1a2eb6da12.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [Overview](https://se.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [Actions Menu](/uxdesign/actions-menu/) * [Address](/uxdesign/address/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Filter Bar](/uxdesign/filter-bar/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) * [Premium Sticker](/uxdesign/premium-sticker/) * [Sorting Bar](/uxdesign/sorting-bar/) * [Story Pager](/uxdesign/story-pager/) * [Text](/uxdesign/text/) * [Toast Feedback](/uxdesign/toast-feedback/) * [ToolBar](/uxdesign/toolbar/) * [Widget Header](/uxdesign/widget-header/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Filter Bar UI Elements The Filter Bar shows the categories of a section above its list, as Tags, Labels, Filters or a Dropdown. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/filter-bar.83f6070c7fba.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/filter-bar.83f6070c7fba.mp4) ## 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](/uxdesign/spacing/) 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. ![One line of categories, never two](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-FilterBar-Anatomy-Band.4d5c67cf0814.png) *One line of categories, never two* ### 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. ![Tags, the selected one filled](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-FilterBar-Anatomy-Tags.6823292723d8.png) *Tags, the selected one filled* ### 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. ![Labels, the selected one underlined](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-FilterBar-Anatomy-Labels.3b0668cae490.png) *Labels, the selected one underlined* ### 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](/uxdesign/icons/) appears on its left, 4px away, to come back to the whole list. ![The row, then one filter selected](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-FilterBar-Anatomy-Filters.5f1e74c1b3f8.png) *The row, then one filter selected* ### 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. ![Closed, then open on the list of categories](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-FilterBar-Anatomy-Dropdown.cb96e8f0e5f9.png) *Closed, then open on the list of categories* ## Properties ### Colors For Tags and Filters, the back office sets the [background](/uxdesign/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](/uxdesign/atom-color/), a [Gradient](/uxdesign/atom-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](/uxdesign/atom-shape/) of the app. For Labels, the Shape applies to the underline. The [Shadow](/uxdesign/atom-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. ![Sharp, rounded and round tags](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-FilterBar-Properties-Shape.91a500623257.png) *Sharp, rounded and round tags* ![The shadow, on the selected tag only](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-FilterBar-Properties-Shadow.75fe17d140ea.png) *The shadow, on the selected tag only* ## 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](/uxdesign/sorting-bar/). ![Above a list, and fixed at the top when the header hides](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-FilterBar-Layout-Placement.7a4ef5cf5c61.png) *Above a list, and fixed at the top when the header hides* ## 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.