More or less burger-less navigation

For your and my inspiration: A collection of websites that don’t hide the navigation on mobile behind a burger/menu button.

Show some, hide the rest

Single row, centered

Single row, spa…


This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović

For your and my inspiration: A collection of websites that don’t hide the navigation on mobile behind a burger/menu button.

Show some, hide the rest

bcc.com shows as many links as fit into one row and hides the rest behind a “more” button

Single row, centered

numl.design has a centered logo at the top and a single row with three links below.

Single row, space-between

codersblock.com has a centered logo at the top and a single row with four links below with items split evenly.

hiddedevries.nl has a left aligned logo at the top and a single row with five links below with items split evenly.

Single row, scrollable

There are 6 links in the navigation on flickr profile pages displayed in a single scrollable row. They use gradients to indicate that the row is scrollable.

Multiple rows

“Women for women” has a top bar with a link and a search, below a centered logo and below the logo two rows with three links and a button.

DF Kayes site has link to the homepage on the left and three rows with 6 links on the right.

Vertical navigation

“A “Style Stage” theme. The navgation is rotated 90 degrees and positioned on the right side of the viewport

Single row, additional icons

draufsicht.com decreases the font size significantly, but adds icons to each link on mobile.

Multiple rows, aligned to the right

The navigation on ilithya.rocks is aligned to the right and splits items into 1-2 rows depending on the viewport width


This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate
APA
Manuel Matuzović | Sciencx (2023-12-04T10:22:59+00:00) » More or less burger-less navigation. Retrieved from https://www.scien.cx/2021/01/07/more-or-less-burger-less-navigation-2/.
MLA
" » More or less burger-less navigation." Manuel Matuzović | Sciencx - Thursday January 7, 2021, https://www.scien.cx/2021/01/07/more-or-less-burger-less-navigation-2/
HARVARD
Manuel Matuzović | Sciencx Thursday January 7, 2021 » More or less burger-less navigation., viewed 2023-12-04T10:22:59+00:00,<https://www.scien.cx/2021/01/07/more-or-less-burger-less-navigation-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » More or less burger-less navigation. [Internet]. [Accessed 2023-12-04T10:22:59+00:00]. Available from: https://www.scien.cx/2021/01/07/more-or-less-burger-less-navigation-2/
CHICAGO
" » More or less burger-less navigation." Manuel Matuzović | Sciencx - Accessed 2023-12-04T10:22:59+00:00. https://www.scien.cx/2021/01/07/more-or-less-burger-less-navigation-2/
IEEE
" » More or less burger-less navigation." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2021/01/07/more-or-less-burger-less-navigation-2/. [Accessed: 2023-12-04T10:22:59+00:00]
rf:citation
» More or less burger-less navigation | Manuel Matuzović | Sciencx | https://www.scien.cx/2021/01/07/more-or-less-burger-less-navigation-2/ | 2023-12-04T10:22:59+00:00
https://github.com/addpipe/simple-recorderjs-demo



Related Posts