In this learning content, we will create the design of the header section that we will use on the Dashboard screen and other screens as well. In the header design, we have a hamburger menu and the name of the screen on the left side. On the right side, we display the user profile and menu. In a web project, when the page scrolls upwards, the header section will be outside the area displayed in the browser. If you want this area to stay on the top edge when the page is scrolled, you should prepare it using the Header element.
In this learning content, we will prepare the design of the header section that we will use on the dashboard screen and other screens.Before we start, let's take a look at the example header section that we will complete at the end of this learning content.
On the left side, there is a hamburger menu and the name of the screen. On the right side, we see the user profile menu. In a web project, when the page is scrolled upwards, the header section will remain outside the area displayed in the browser. If you want this area to stay fixed at the top when the page is scrolled, you should prepare it using the Header element.When we examine the element tree fundamentally, we see the row element added inside the Header element. The row element can be divided into 24 different columns. Here, a two-column structure is used. When we look at the menu icon on the left side and the screen name section, we see that Icon and Label elements have been added to the Horizontal Stack element. The Horizontal Stack element is a container-type element where the spacing between two or more elements added to it can be adjusted. With the Icon element selected, you can choose the icon you need from the icon library. On the right side, for creating the profile menu, we first see the content menu and the Image element added to it.Now let's prepare a similar header section on a new screen.
On the left side, open the New Screen Pop-up with the Screens panel. Choose the Blank screen type and create the screen by entering the name Dashboard.
On the left side, drag and drop the Header element onto the screen using the Elements panel.
Now, to divide this Header element into two sections, let's add a Row element inside it. The Row element comes with three columns by default. After adding the element, turn it into a two-column structure from the Properties panel on the right side. We can also set how this column structure will behave on tablet and phone screen widths.
Add a Horizontal Stack element to the left column within the Row. Inside this element, add an Icon element. While the Icon element is selected, choose the menu icon from the icon library in the Properties panel on the right side.
The Icon element is font-based, meaning you can adjust properties like size and color using the Text section in the Styling panel.
Add the Label element that will display the screen name to the right of the icon. Change the value in the Properties panel from Label to Dashboard. Complete the visual editing by selecting the H3 text style from the Styling panel > Text section.
To adjust the spacing between the two elements added to the left, select the Horizontal Stack element. Adjust the gap between the added elements using the Gap parameter in the Properties panel. Enter a value of 16px in this area.
Now, to create the profile menu on the right, first, drag and drop the Content Menu element under the Trigger section.
Then add the Image element to the Content Menu. With the Image element selected, choose fill for the imageFit property in Properties. By setting imageFit to fill, the uploaded image will be centered and fitted to the dimensions of the Image element.
With the Image element selected, adjust the width and height to 32px via Styling > Layout > Size.
In Styling > Border > Radius, give the Image element a radius value of 32px to display the image within a rounded frame.
After adjusting the visual settings of the Image element, use Properties > Value > Uploaded Images to add an avatar image.
You can use the Kuika AI assistant to create a new image for the avatar if needed.
Once you've finished working with the Image element, let's organize the contents of the Content Menu.
First, with Content Menu selected, under Properties > Content Menu, delete the other menu items to leave only one menu item.
Select the menu item and rename it to Logout using Label > Fixed Value.
With the menu item selected, for styling, select the Button_Secondary style from Styling > Text > Styles. To set a color, choose red from the Color field.
Finally, select the column where the Content Menu is located and align it to the right from the Layout section in the Styling panel.
We've prepared the header design. With a similar workflow, you can easily create the header sections you need.In the next learning content, we will work together to design the Dashboard screen.
In this learning content, we will create the design of the header section that we will use on the Dashboard screen and other screens as well. In the header design, we have a hamburger menu and the name of the screen on the left side. On the right side, we display the user profile and menu. In a web project, when the page scrolls upwards, the header section will be outside the area displayed in the browser. If you want this area to stay on the top edge when the page is scrolled, you should prepare it using the Header element.
In this learning content, we will prepare the design of the header section that we will use on the dashboard screen and other screens.Before we start, let's take a look at the example header section that we will complete at the end of this learning content.
On the left side, there is a hamburger menu and the name of the screen. On the right side, we see the user profile menu. In a web project, when the page is scrolled upwards, the header section will remain outside the area displayed in the browser. If you want this area to stay fixed at the top when the page is scrolled, you should prepare it using the Header element.When we examine the element tree fundamentally, we see the row element added inside the Header element. The row element can be divided into 24 different columns. Here, a two-column structure is used. When we look at the menu icon on the left side and the screen name section, we see that Icon and Label elements have been added to the Horizontal Stack element. The Horizontal Stack element is a container-type element where the spacing between two or more elements added to it can be adjusted. With the Icon element selected, you can choose the icon you need from the icon library. On the right side, for creating the profile menu, we first see the content menu and the Image element added to it.Now let's prepare a similar header section on a new screen.
On the left side, open the New Screen Pop-up with the Screens panel. Choose the Blank screen type and create the screen by entering the name Dashboard.
On the left side, drag and drop the Header element onto the screen using the Elements panel.
Now, to divide this Header element into two sections, let's add a Row element inside it. The Row element comes with three columns by default. After adding the element, turn it into a two-column structure from the Properties panel on the right side. We can also set how this column structure will behave on tablet and phone screen widths.
Add a Horizontal Stack element to the left column within the Row. Inside this element, add an Icon element. While the Icon element is selected, choose the menu icon from the icon library in the Properties panel on the right side.
The Icon element is font-based, meaning you can adjust properties like size and color using the Text section in the Styling panel.
Add the Label element that will display the screen name to the right of the icon. Change the value in the Properties panel from Label to Dashboard. Complete the visual editing by selecting the H3 text style from the Styling panel > Text section.
To adjust the spacing between the two elements added to the left, select the Horizontal Stack element. Adjust the gap between the added elements using the Gap parameter in the Properties panel. Enter a value of 16px in this area.
Now, to create the profile menu on the right, first, drag and drop the Content Menu element under the Trigger section.
Then add the Image element to the Content Menu. With the Image element selected, choose fill for the imageFit property in Properties. By setting imageFit to fill, the uploaded image will be centered and fitted to the dimensions of the Image element.
With the Image element selected, adjust the width and height to 32px via Styling > Layout > Size.
In Styling > Border > Radius, give the Image element a radius value of 32px to display the image within a rounded frame.
After adjusting the visual settings of the Image element, use Properties > Value > Uploaded Images to add an avatar image.
You can use the Kuika AI assistant to create a new image for the avatar if needed.
Once you've finished working with the Image element, let's organize the contents of the Content Menu.
First, with Content Menu selected, under Properties > Content Menu, delete the other menu items to leave only one menu item.
Select the menu item and rename it to Logout using Label > Fixed Value.
With the menu item selected, for styling, select the Button_Secondary style from Styling > Text > Styles. To set a color, choose red from the Color field.
Finally, select the column where the Content Menu is located and align it to the right from the Layout section in the Styling panel.
We've prepared the header design. With a similar workflow, you can easily create the header sections you need.In the next learning content, we will work together to design the Dashboard screen.
