/

The Header element is a structural interface element located at the top of an app screen that presents the page’s purpose, title, and key action points to the user.

To get started, drag the Header element onto the page and add a Row element inside it. In the desktop view, select the three-column layout and set the column widths to 8-10-6 in the Customize section.

Place a Horizontal Stack in the left column and add an Image and an Icon element inside it. Center the Horizontal Stack vertically using the Styling panel. Center the middle column horizontally and vertically using the Styling Layout section; add a Horizontal Stack inside it and place a Text Input, setting its width to 270 px. Add an Icon element to the Horizontal Stack and center the Column vertically. Center the right column horizontally and vertically using the Styling Layout panel; add a Horizontal Stack inside it, center it vertically, and place two Icon elements.

Click the Image element and select the image you uploaded via “Uploaded Images” in the Value field. Select the Icon elements in the following order: apps, search, accountcircle, and shoppingcart. Set the Gap value of the first Horizontal Stack to 20.

When you click the Preview button, you’ll see a professional top navigation bar where you can search and quickly access modules.