Kuika's Header element is located at the top of the application or page and contains basic content such as the title, menu, logo, user information, and action buttons. It allows users to quickly grasp the purpose of the page and facilitates navigation.
The Header element is supported in both web and mobile applications.
Usage Areas
Displaying the application or page title,
Adding a logo and brand identity,
Placing user information or profile icons,
Creating a menu and navigation bar,
Adding a search bar or action buttons, etc.
Usage Scenario – E-Commerce Application Header
Header in an e-commerce application:
Logo on the left,
Search bar in the middle,
User profile and shopping cart icon on the right.
This allows the user to see which page of the application they are on, perform a quick search, and easily access their profile/shopping cart.
UI Design Process
Different elements can be added to the header:
Row → To arrange content horizontally
Icon → For menu, notification, or cart icons
Input → To add a search bar
Image → To add a logo
Content Menu → To create a navigation menu
When the Scenario Step is Complete
A fixed header appears at the top of the screen.
The logo, search bar, and user icons are neatly arranged.
The header remains fixed even when scrolling on long pages.
Users can quickly search and access their profile/cart.
Limitations
The header can only be used once.
Adding too many elements may make it look cluttered on narrow screens.
Tips and Best Practices
Opt for a simple header on mobile and a more detailed one on the web.
Position the logo in the top left corner for brand identity.
