Mobile App Navigation Types

Introduction

Mobile apps have 4 main methods of navigation available

  • All apps use a Nav Bar at the top of the screen

  • A Side Menu or Bottom Tabs are used to navigate to main screens. Only one of these 2 options can be used in any app

  • Tabs can be added within screens, shown here with Bottom Tabs

Configuration

Nav Bar

The Nav Bar for a mobile app is presented at the top of the screen.

Go to the Navigation section of UI Builder and check for the Quick Brick Navigation Bar

If it is not present go to Add Navigation and add it to your layout

Style the Nav navbar

Once added and selected, the right hand panel in UI Builder will configure the QB Nav Bar. Make sure to save your settings.

GroupItemInfo
Default navigationSelect to make Nav Bar the default navigation to apply to the app vs any other custom designed navigation plugin
StyleBar StateCurrently only On Top is functional
StyleBackground TypeCurrently only Coloured is functional
StyleColorSet the color for the Nav Bar
StyleLogo DisplayAdd an app logo to the Nav Bar Currently only AllScreens or None is functional for QB apps
StyleAlignmentAlign the app logo Currently only Centre is functional for QB apps
AssetsLogoUpload an app logo PNG Logo must be 128px x 44px @3x. Use transparent background to fill any unwanted space and make logo fit available size.
AssetsBack Button, Back Button, Menu ButtonUpload a back button PNG 38px x 44px @3x

Side Menu

Only one navigation type can be added to an app, between the Side Menu or Bottom Tabs.

The Side Menu is a navigation method in an app, displayed in an app when the burger menu icon in the App Nav Bar is selected.

Check the Quick Brick Side Menu plugin is in your app: Go to the navigation section of UI Builder and check for the Quick Brick Side Menu

If it is not available got to Add Navigation and selected the QB Side Menu.

Style the Side menu

GroupItemInfo
StylesBackground ColorSet the background color for the whole Side Menu
StylesItem Background ColorSet the background color for all the entries in the Side Menu
StylesSelected Item Background ColorSet the background color for a side menu entry when it is s elected
StylesTitle ColorSet the color for text in the side menu
StylesTitle Selected ColorSet the color for text when a specific entry in the side menu is selected
StylesiOS Font and Android FontConfigure the fonts for iOS and Android devices for not selected / selected states
StylesBorder colorPlace a border around each entry in the side menu
StylesSeparation Line Margin and ColorDefine the separation line between each entry in the side menu
StylesDiscard screen stateTurn this option on only if your app has a lot of menu items and you have experienced high memory consumption on the device. This option will recreate the screen each time you navigate to a new screen.
AssetsArrowPlaces an arrow on the right of each entry in the side menu PNG 63px x 63px
AssetsExpandable Icon2nd level side menu not available yet
AssetsExpanded Icon2nd level side menu not available yet

Attach screens to Menu

Select ADD ITEM to add a side menu entry and attach it to a screen

Name the entry at the top - this will appear in the side menu

Set the target screen

Upload an icon NOTE: Only "ICON" supported. "ICON Selected" state is not supported.

Bottom Tabs

Only one navigation type can be added to an app, between the Side Menu or Bottom Tabs.

Bottom Tabs display two to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom tab is tapped, the user is taken to the top-level navigation destination associated with that icon.

Bottom tabs can show from 2 min to 5 max tabs and can be configured as follows.

  • Tab Attributes

    • Select to show all tabs as text plus icon or just icon across all the tabs
    • iOS and Android text label font, size and letter spacing
    • Default font color for when a tab is not selected
    • Active font color for when a tab is selected
    • Max tab width - set the width between 80 and 120px for the tabs. This can prevent tabs getting widely spaced on tablets
  • Bar Attributes

    • Background Color
    • Top border thickness and color to show separation between the tab and screen areas
info

These items have not yet been enabled with Bottom Tabs and so their configuration fields in UI Builder are not active. Drop Shadow (iOS): Color, offset, opacity, radius. Elevation (Android)

Add Bottom Tabs to your app

Select Bottom Tabs in the MAIN NAVIGATIONS panel

Style Bottom Tabs

DescriptionNameDefault Value
BarText Label Toggle (On/Off)On
BarBackground Colorrgba(13, 17, 29, 1)
BarAndroid Elevation0 NOT YET ACTIVE
BariOS Shadow ColorNOT YET ACTIVE rgb(0, 0, 0)
BariOS Shadow OpacityNOT YET ACTIVE 0%
BariOS Shadow RadiusNOT YET ACTIVE 0
BariOS Shadow Offset WidthNOT YET ACTIVE 0
BariOS Shadow Offset HeightNOT YET ACTIVE 0
BarBackground blurNOT YET ACTIVE 0
BarTop border thickness0
BarTop border colorTransparent
Tab LabelsAndroid Font FamilyRoboto
Tab LabelsiOS Font FamilySF Pro Text
Tab LabelsAndroid Font size10
Tab LabelsiOS Font Size10
Tab LabelsAndroid Letter Spacing0
Tab LabelsiOS Letter Spacing0
Tab LabelsActive Font Colorrgba(4, 153, 207, 1)
Tab LabelsDefault Font Colorrgba(137, 142, 159, 1)
Tab LabelsRipple Color (Android)rgba(4, 153, 207, 0.15)
Tab LabelsMax tab widthset from 80 to 120px

Tabs

Supported

When the Tabs(QB) plugin is in an app then Tabs can be added

  • To the TOP of the app, below the Nav Bar ONLY
  • With text entries per tab field
  • Fixed width, dynamic width and fractional width options
  • The tab in focus will centre on the screen when navigating until that is not possible due to being at the left or right ends of a row of tabs

Not supported

  • Tabs cannot be positioned anywhere else except the top of the screen
  • No images in tabs, only Text

Tab Configuration

Add a new screen and select Tabs(QB)

Select the screen in UI Builder and configure the Tabs in the right hand panel

DescriptionNameDefault Value
Text LabelActive text font / weight / size / line height / letter-spacing / coloriOS: SF Pro Text, Bold, Size 13, Line height 16, Letter spacing -0.4, color rgba(0, 125, 255, 1.0) Android: Roboto, Bold, Size 13, Line height 16, Letter spacing 0, color rgba(0, 125, 255, 1.0)
Text LabelDefault text font / weight / size / line height / letter-spacing / coloriOS: SF Pro Text, Bold, Size 13, Line height 16, Letter spacing -0.4, color rgba(167, 167, 167, 1.0) Android: Roboto, Bold, Size 13, Line height 16, Letter spacing 0, color rgba(167, 167, 167, 1.0)
Text LabelText TransformNone(default) / Uppercase / Capitalise
Tab BarBackground colorrgba(255, 255, 255, 1.0)
Tab BarDrop Shadow (iOS Only)Color: rgba(0, 0, 0, 0.10), Shadow Offset (height): 4. Shadow Radius: 8
Tab BarElevation (Android Only)4
Tab BarPadding Left & Right0
Tab BarHorizontal gutters (space between tabs)0
Tab BarGradient Left & RightNot available
Tab Bar DisplayFractionalAll tabs distributed acoss 100% width of the screen. Ellipsis are used when text label does not fit the space
Tab Bar DisplayFixedSpecify fixed width of tab. All tabs are the same width. Option to align tabs to the center/left/right when tabs length is less than screen width. Snaps to center when width of tab list allows .
Tab Bar DisplayDynamicText label is as wide as the string/number of characters. Option to align tabs to the center/left/right when tabs length is less than screen width. Option to align tabs to the center/left/right when tabs length is less than screen width

Tab Snapping This is applied to tabs when using fixed & dynamic modes. When set active tabs within a long list of tab items will snap to the centre of the component.

Tab Alignment This can be applied to tabs using fixed & dynamic modes when the total tab items width is less than the width of the screen. Tab items can be left, right or centrally aligned.

Anatomy Of A Tab

Text Labels Text labels can be styled with the following attributes:

  • Default (not selected tabs): Text size, color, font, weight
  • Active (selected tab): Text size, color, font, weight
  • Line height
  • Letter spacing
  • Text transform