Types of Navigation icons | Different types of navigation icons.

Hey everyone 👋

Hope you had some rest the past weekend 😊 I myself had a few days off from posting here but today, we're back with another batch of educational content. 🥳 Different types of navigation icons.

Types of Navigation icons

In the following post we'll cover the navigational icons and show each one with an example in use:

  1. Hamburger
  2. Kebab
  3. Doner
  4. Bento
  5. Meatballs
  6. List-grid
  7. Full-screen
  8. Exit full-screen


Hamburger

Hamburger menu or three-line menu is an icon most commonly used for nesting navigation menus for websites as well as apps that hide the traditional navigation menu until clicked on the icon.

Different types of navigation icons. | Hamburger

Kebab

Kebab is designed to open a smaller inline menu from a three dot icon aligned vertically l. Usually a handy additional inline menu for a horizontally laid out list item.

Different types of navigation icons. | Kebab

Doner

This one’s pretty interesting as I haven’t really seen it in action but I read it’s used interchangeably with a filter icon. Offers quick group filtering options.

Different types of navigation icons. | Doner

Bento

Bento icons are used mainly to group a list of results into a grid view to easily manipulate the way you organize information on the screen. It can also be used to group up related apps.

Types of Navigation icons |Doner

Meatballs

Similar to kebab menu it usually consists of additional inline items like quick options - for example when organizing your messages and grouping them into favorite's, saved, archived, trashed folders and so on.

Types of Navigation icons | Meatballs


List grid

List grids are often used interchangeably with the grid view to switch between the two and display information in the most optimal and easy to read way.

Types of Navigation icons | List grid


Full-screen

Full-screen icons are used for zooming in on any specific multimedia component like a gallery item, video, or to simply hide all the other menu items or tools.

Types of Navigation icons |  Different types of navigation icons. | List grid


Exit full-screen

Contrary to the full-screen icon, an exit full- screen icon is used in Ul to simply click out of the zoomed in section and navigate back to a more detailed view.

Types of Navigation icons |  Different types of navigation icons.


If this one goes well, I'll create the next part and cover all sorts of different icons ✌️😊 As always, thank you all for your support 🙏🏼 I appreciate every single one of you! Thanks! 🙌

Have a great day you all!

Aatm Prakash

Content Creator, Graphic Designer, UI / UX Designer

Post a Comment (0)
Previous Post Next Post