Header - UI Element

Headers are the first element users come across when entering a design. It is a simple container designed to be placed at the top of every view page and reacts depending on the scroll view elements. Headers provide information regarding branding, navigation, search and can also offer access to app actions like notifications and settings. Headers can contain titles and actions related to the current screen.

‍

1. Web ‍

• Default header navigation – Responsive navigation bars include multiple menu items, CTA buttons, and hamburger menu icons.
• Header with mega-dropdown – This option offers a more complex dropdown that can be used instead of multiple actions and categories.
• Header with centered logo – This type of header can be used when highlighting the logo and branding of the company.
• Header with a dropdown menu – This header is used to create a multi-level dropdown.
• Header with sub-navbar – This header includes a sub-navbar and here can be encountered CTA’s or menu items.
• Header with a search bar – This header can be used in order to enable a responsive search bar.
• Header with mega menu – This header can be used to represent multiple elements and website page classifications.
• Header with user dropdown – This example can be used when representing the logged-in avatar icon from a website visitor.

‍

‍

2. App

• Center-aligned

‍

• Small

‍

• Medium

‍

• Large

‍

• The header needs to be used in every design and be scalable depending on the format.
• To keep the design persistency.
• To include links and dropdowns for easier navigation and a better user experience.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find headers and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!