Skip to content
search icon
clear
Component Status

Navigation top bar

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Top bar component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the grouping needed.
  3. Once the component is located, click and drag it into the frame/artboard.

How to use

  1. Place the Top bar at the top of your frame/artboard.
  2. Locate the Design tab in the Inspector Panel.
  3. Under the Constraints section set up the following constraints:
    • Set the constraints to Left & Right and Top.
    • Check off the box called Fix position when scrolling.
  4. Edit the content sections:
    • Title and navigation: Triple-click on the title to edit. Edit the icon button to have the needed icon.
    • Custom content: Build your own components to swap with the nested Placeholder instance if needed.
    • Actions: Edit the icon buttons that are allowed to edit if other actions are needed.

API

TopBar

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodefalseundefined@ignore

Header

PropertyTypeRequiredDefaultDescription
classNameStringfalseundefined@ignore
childrenNodefalseundefined@ignore

CustomContent

PropertyTypeRequiredDefaultDescription
classNameStringfalseundefined@ignore
childrenNodefalseundefined@ignore

Actions

PropertyTypeRequiredDefaultDescription
classNameStringfalseundefined@ignore
childrenNodefalseundefined@ignore
Edit this page on GitHub