--- title: "Item: het element dat elke tab van je app vormgeeft" description: "Het Item vormt elke tab in de navigatie van je app: icoon, label en indicator. Ontdek hoe we het hebben ontworpen." canonical_url: "https://nl.goodbarber.com/blog/item-het-element-dat-elke-tab-van-je-app-vormgeeft-a1451/" lang: nl date: 2026-09-24 last_updated: 2026-09-24 --- # Item: het element dat elke tab van je app vormgeeft [Terug](/blog/maak-het-waar-r13/) # Item: het element dat elke tab van je app vormgeeft Written by [Marie-Pierre Jeffard](https://nl.goodbarber.com/blog/author/marie-pierre-jeffard/) on Donderdag 24 September 2026 ## Elke tab in de navigatie van je app rust op hetzelfde element: het Item, dat een icoon, een label en een indicator kan combineren. We hebben het ontworpen om onze TabBars van vandaag en morgen vorm te geven. Het staat nu gedocumenteerd in het GoodBarber Design System. ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98137938-68342905.jpg?v=1790245628.1288896) Je content is verzorgd, je kleuren zijn gekozen. Dan blijft de navigatiebalk over: daarmee gaan je gebruikers van de ene sectie naar de andere, en hij weegt zwaar mee in de indruk die je app achterlaat. Elk van zijn tabs rust op een element dat als bouwsteen is ontworpen: het **Item**. In de [nieuwe generatie TabBar](https://nl.goodbarber.com/blog/tabbar-de-nieuwe-generatie-is-er-a1344/) is het dit element dat elke navigatie haar karakter geeft. ## Een icoon, een label, een indicator [Het Item maakt zich los uit zijn TabBar en toont zijn onderliggende elementen](https://player.vimeo.com/video/1229824805?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) In een Item heeft elk element zijn rol. Het icoon staat voor de sectie, het label toont de naam ervan en de indicator, die optioneel is, markeert de actieve tab. Elk element kun je apart tonen of verbergen, wat drie composities oplevert: icoon en label, alleen icoon, alleen label. Dat is wat de [Minimal TabBar](https://nl.goodbarber.com/blog/minimal-tabbar-een-compacte-icon-only-en-resoluut-moderne-navigatie-a1352/), helemaal in iconen, onderscheidt van de [Clean TabBar](https://nl.goodbarber.com/blog/clean-tabbar-een-text-only-subtiele-en-elegante-navigatie-a1358/), helemaal in tekst: hetzelfde element, anders samengesteld. ## 17 eigenschappen voor de TabBars van vandaag en morgen ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98137938-68342907.jpg?v=1790245629.8968976) Om een TabBar te ontwerpen, beschikken onze designers over 17 eigenschappen: 8 voor het Item, 6 voor het icoon en 3 voor het label. Het oppervlak van het Item kan een effen kleur, een kleurverloop of een blur-effect krijgen, een rand, een schaduw, rechte of afgeronde hoeken. De layout bepaalt de grootte, de oriëntatie, de binnenmarge, die het aanraakgebied afbakent, en de ruimte die de elementen laat ademen. Al die mogelijkheden hoef je niet zelf in te stellen. We gebruiken ze om complete TabBar-layouts samen te stellen die aansluiten bij de huidige codes van app-design: Bold, Minimal en Clean TabBar zijn de eerste drie. Als die codes veranderen, ontstaan er nieuwe layouts uit hetzelfde element, zonder van nul te beginnen. Zo kunnen we je TabBars bieden die altijd met hun tijd meegaan. In je back office kies je je TabBar en stem je hem daarna af op je identiteit: grootte van de tabs, afronding van de hoeken, kleuren, lettertype van de labels, de manier waarop de actieve tab wordt aangeduid. Je eigen iconen kunnen zelfs naast die van het systeem staan. ## Duidelijke toestanden, verzorgde animaties [Dot, Tiny, Line: de indicatoren en hun selectie-animaties](https://player.vimeo.com/video/1229806792?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Een Item heeft twee toestanden: standaard en geselecteerd. Om de actieve tab te onderscheiden, heeft het vier middelen, apart of gecombineerd: de kleur, de achtergrond, de rand en de indicator. Die laatste verschijnt alleen op de geselecteerde tab, in drie vormen: een punt (**Dot**), een kort streepje (**Tiny**) of een lijn (**Line**). Elke vorm heeft zijn eigen beweging. De punt en de lijn krimpen op de vorige tab en groeien op de nieuwe, het korte streepje glijdt van de ene naar de andere. Wanneer de selectie via de achtergrond loopt, zoals bij de [Bold TabBar](https://nl.goodbarber.com/blog/bold-tabbar-een-prominentere-navigatie-ontworpen-om-de-interface-te-structureren-a1348/), is het de gekleurde achtergrond die verschuift. Korte overgangen die elke verandering leesbaar maken, zonder te overdrijven. ## Hetzelfde Item, van mobiel tot desktop ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98137938-68342909.jpg?v=1790245631.2529037) Het Item past zijn oriëntatie, binnenmarge en ruimte aan elk scherm aan: mobiel, tablet en desktop. Onderaan een telefoon staat het icoon boven het label. Op desktop wordt de TabBar een zijbalk, en kan het Item horizontaal worden om erin te passen. Je stelt je navigatie één keer in: elk scherm krijgt de versie die erbij past. ## Het Item komt in het Design System ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98137938-68342910.jpg?v=1790245633.1529124) Na de [TabBar](https://nl.goodbarber.com/uxdesign/tabbar/) heeft het Item nu [een eigen pagina](https://nl.goodbarber.com/uxdesign/item/) in het [GoodBarber Design System](https://nl.goodbarber.com/uxdesign/), en het komt niet alleen. Met het [Item Icon](https://nl.goodbarber.com/uxdesign/item-icon/), het [Item Label](https://nl.goodbarber.com/uxdesign/item-label/) en de [Item Indicator](https://nl.goodbarber.com/uxdesign/item-indicator/) opent het een nieuwe categorie: de [UI Elements](https://nl.goodbarber.com/uxdesign/ui-elements/), de bouwstenen van onze componenten, elk met één enkele rol. Wil je het Item in detail ontdekken? Ga naar [zijn pagina in het Design System](https://nl.goodbarber.com/uxdesign/item/). En om het aan het werk te zien, kies je je TabBar in de sectie Menu van je back office. ![Marie-Pierre Jeffard](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Over de auteur[Marie-Pierre Jeffard](https://nl.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer Ik ben UI Designer bij GoodBarber. Design system van de apps, componenten, layouts, website, illustraties, animaties: alles wat ik doe draait om de interface. Wat ik leuk vind aan ons product: universele regels bedenken die op elk scherm werken en ruimte geven aan elke visuele identiteit. De app wordt een podium voor jouw content. Ik hou van wat er eenvoudig uitziet, en van al het onzichtbare werk dat nodig is om daar te komen: de regels, de keuzes en de beperkingen die een interface overeind houden. Daar schrijf ik hier over. [Lees meer](https://nl.goodbarber.com/blog/author/marie-pierre-jeffard/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/marie-pierre-jeffard/)