Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

Positioning

The BottomNavigation enables you to specify different position modes in regard to the page content.

Position Mode

To specify the type of positioning mode used for the BottomNavigation, use the positionMode property.

The BottomNavigation provides the following options for setting the position mode:

  • fixed(Default) The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
  • sticky Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static and fixed CSS position property, depending on the scroll position. It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like fixed positionMode.

When the BottomNavigation has positionMode={'fixed'}, there is no reserved space for the component with regard to the other page content. This can cause parts of the page to be invisible behind the BottomNavigation. In this case, either apply bottom padding to the page content or set a sticky position mode.

Example
View Source
Change Theme:

In this article

Not finding the help you need?