The Ultimate Bottom Navigation Bar Component Pack

Figma Resource

Based on Apple Human Interface Guidelines¹ and Google Material Design Guidelines².


This component pack features:

  • iOS and iPadOS Tab Bars
  • Android and Material You Bottom Navigation Bars
  • Label and selection toggles for individual tabs
  • Notification dots and editable badge counts for individual tabs
  • SF Symbol³ and SVG icon format picker for iOS and iPadOS Tab Bars
  • Material Icon⁴ library for Android and Material You Bottom Navigation Bars
  • Gesture, 2-button, and 3-button system navigation presets for Android and Material You Bottom Navigation Bars
  • Material Theme Builder⁵ plugin compatibility for Material You Bottom Navigation Bars
  • Light and Dark Mode support
  • Auto Layout and Variants


External Links


  1. Apple Human Interface Guidelines

  2. Google Material Design Guidelines

  3. SF Symbols

  4. Material Icons

  5. Material Theme Builder


Changelog


09.26.2021

  • Published community file.
  • Added empty state illustration to blank page.


09.27.2021

  • Fixed conflicting variants for 4-tab and 5-tab iPhone SE bars (dark mode).
  • Added

    About

    page containing a short summary, feature list, and guides.


09.28.2021

  • Fixed spelling error in iOS and iPadOS guide (

    About

    page).


09.30.2021

  • Adjusted layout grids color & opacity (where applicable).
  • Adjusted layout grid margins for cover image.
  • Fixed sizing discrepancy (left margin) in iPad Pro (dark mode) example mockup.
  • Edited file description to specify support for Android and Material You system navigation presets.


12.12.2021

  • Added Material Theme Builder plugin compatibility for Material You Bottom Navigation Bars.
  • Specified navigation presets for Android & Material You bars and Material Theme Builder plugin compatibility in the Features section (

    About

    page).


12.13.2021

  • Added Material Theme Builder plugin guide (

    About

    page).
  • Added external links for Apple Human Interface Guidelines, Google Material Design Guidelines, SF Symbols, and Material Theme Builder plugin in file description.


12.14.2021

  • Created effect styles for iOS and iPadOS blurred tab bars.
  • Created grid styles for cover image and guides.


01.18.2022

  • Fixed several discrepancies with Material You Bottom Navigation Bars, aligning it closely with Google’s Material 3 Design Kit.
  • Fixed auto layout inconsistencies for Material You Bottom Navigation Bars.
  • Fixed scaling inconsistencies for Android and Material You system navigation presets.


04.23.2022

  • Replaced light and dark theme icons with unified iOS theme switcher icon in cover image.


07.23.2022

  • Added entire collection of Material Icons in all five styles (Filled, Outlined, Rounded, Sharp, and Two Tone) for optimized icon selection and replacement in Android and Material You Bottom Navigation Bars.
  • Edited file description to specify inclusion of Material Icon library for Android and Material You Bottom Navigation Bars.
  • Fixed several plugin-related issues in Material You Bottom Navigation Bars.
  • Updated Material You Bottom Navigation Bars to support Version 11 of Material Theme Builder plugin.
  • Removed conflicting styles from external and missing libraries.


07.30.2022

  • Slightly increased Lightness value of

    base/blue-light

    color style.


09.14.2022

  • Added note in About page clarifying specification of

    material-you

    current theme for Material Theme Builder plugin.


05.02.2023

  • Updated Material You Bottom Navigation Bars to support Version 14 of Material Theme Builder plugin.

Related Posts