11 Stunning Examples of Tab-based Navigation
Tabs are extremely practical elements that allow for a clutter-free UI. And while they’re most commonly used to group related content within a single website page, some designers have experimented with them and started employing tabs as a navigational device for entire sites. Instead of displaying pages as simple links, they started placing them into beautifully designed and clean tabbed menus, creating visually appealing and intuitive website navigation systems.
Over the last few years, vertically placed, full-height navigation tabs became particularly popular in modern web design. The typography on these tabs is often perpendicular, making the menus look a bit unusual and interesting to the eye. In some cases, tabbed menus aren’t even placed at the top. They often take up either the entire screen or a significant portion of it, becoming an important part of the page content. Moreover, both vertical and horizontal tabs are often adorned with engaging effects that enhance their appeal and make them more prominent.
In this article, we are going to share a collection of websites that illustrate how creative you can be when designing tab-based navigation and implementing tabs into your projects. The brands that illustrate the versatility and flexibility of tabbed navigation include:
Book.Land is a terrific project for collaborative storytelling. It was devised by Harry Boyd, a graphic designer, with the goal of encouraging audiences worldwide to write a novel together. Each user needs to continue the story where it was left off and also add some illustrations to complement the text. The site’s layout is unusual and interesting to the eye. The homepage opens with an amusing logo animation, where letters turn into doodles for a split second – the two o’s morph into a cat, smiley face, an envelope, etc. On either side of the screen, there are vertical tabs, resembling books placed on a shelf. This design perfectly complements the site’s purpose. The homepage gives off brutalist vibes, with uppercase sans serif typography and the screaming fluorescent green clashing with the surrounding calmness of the neutral white color. The tabs at both sides of the screen contain a brief description of their content. Inner pages are divided into two parts, with doodles on the left and stories on the right side of the screen. The title of each story is animated in an electrifying way, breaking the inertia of the surrounding content and announcing the novel in an attention-grabbing way. There is also a barcode – a standard element on physical book copies. But instead of the 8-digit number, the barcode on this website displays the time.
Queertrip is an LGBT travel agency. The project was devised with the goal of introducing those who identify as queer to the places they can travel to without having to worry about their safety. The homepage shows a rotating illustration of the Earth and an animated arrow that travels around the globe. At the same time, the color of the background, elements, and typography changes every few seconds, mirroring the colors of the rainbow. On the right-hand side of the screen, you’ll notice two tabs. One is in black and the other in white. They both feature perpendicular, animated typography, informing you about the content that hides behind these tabs. Even though the homepage is bursting with colors, the scrolling typography and the monochromatic color palette of the tabs are just as attention-grabbing. When you place the cursor on either tab, they slightly expand, revealing a small part of the content they feature. On click, the content takes up almost the entire portion of the screen, but the tabs remain visible on the side, so you can jump from one to the other whenever you want.
Canal Street Market is a retail market, food hall, and community space located in New York City. The website’s content is organized into colorful tabs. Each section is presented using a different hue. The homepage includes a subtle white backdrop, while other pages have more vibrant backdrops, including blue, red, and orange shades. The switch from one color to the next enhances the site’s visual appeal and makes it appear more exciting to your eye. When you click on tabs, they elegantly stretch across the screen, showcasing the beauty of featured content. Aside from the gorgeous visuals, some pages also include animated lines. For instance, in the upper section of the homepage, there is a zig-zag line that incessantly flows from one side of the screen toward the other. On the other hand, toward the bottom of the homepage, you’ll come across animated dotted lines. The movement of the lines as well as the vivacious color palette on the site perfectly balance out and soften the rigidness of tabs, creating a fun and engaging environment for users to explore.
Space – de Space was a place in Luzern where artists could exhibit their work. Even though the website includes a program from 2018, we added this example to the list because it exemplifies a particularly creative implementation of tabs on a site. The homepage evokes alternative vibes. The name of the organization is depicted using a combination of cursive typography and geometric shapes. It’s hardly readable and it looks more like an ornament that amplifies the site’s appeal. Each exhibition is presented as a tab. The tabs overlap, with only their tops peaking, revealing the name of the artist, the date, and a glimpse of the content featured inside. Each tab is colored in a different hue. However, since the majority of the tabs are painted in pastel shades, the homepage, despite containing a lot of elements, isn’t hard on the eyes. In fact, the transitions from powdery pink and soft yellow to baby blue and delicate violet make the page appear more exciting to explore. The way tabs are arranged one on top of the other makes exploring the homepage feel like going through a well-organized file drawer.
New Themes
VIEW COLLECTION
Tablet is an online Jewish magazine. Its design resembles the look of printed newspapers, with a paper-like background and grid-based layout. The content is in black-and-white with call-to-action buttons in red. However, when you hover over images, they gain color, enlivening the site. On the far-right part of the screen, you’ll notice an invitation to explore the magazine’s sections. The all-caps, red letters encourage you to click on them. When you put the cursor over that section of the page, you’ll see it slightly expand, revealing two more tabs. When you click on them, a collection of selected articles appears in the viewport, stretching across the entire screen. Article previews and featured visuals are all organized into tabs. You can explore them by using the horizontal navigation, which helps make this section more immersive and fun to browse. The articles appear in threes, so the entire screen stays covered in tabs all the time.
Vine Trail sources, imports, sells and distributes wines from France, Northern Spain, and Italy. The homepage opens with a stunning fullscreen animated photo, transporting you to one of the breathtaking wine regions. And while the homepage provides a beautiful introduction to the brand, if you want to learn more about the growers and discover the full wine list, you should click on the two eye-catching blue and orange tabs on the right-hand side of the screen. When you click on them, they take up the entire surface of the screen. Both tabs contain long lists of data organized into columns either alphabetically (growers) or by the region (wines). You can also apply handy filters to find the content that interests you the most. Implementing tabs on the site allowed the designers to display a lot of information in a visually appealing way without cluttering the screen and overwhelming you. Instead, you can elegantly click on the section you want to learn more about and immerse yourself in the fullscreen, vividly colored content.
Off Season is a design and photo studio that specializes in working with musicians. Their website represents a compelling combination of grid lines and tabs. The layout is unusual and interesting to explore. On the left-hand side, a small portion of the screen includes a short description of the studio. Underneath the text, there are two intersecting squares. They interact with your cursor – the closer you bring your mouse to the squares, the further apart they drift and vice versa. The rest of the layout consists of menu sections presented as tabs. When you click on them, each folder expands, revealing its colorful content. Before each section title, there is a small, outlined circle that on hover and on click becomes black, signaling that the tab is in an “active” state.
G!theimagineers is a production studio that combines architecture, scenography, light, image, and sound in their work. The most obvious elements on the site are grid lines and a variety of geometric shapes that stand out against the black background. The overall design is minimalist and simple, but the clever and playful implementation of lines makes the site engaging and immersive. The grid lines form full-height tabs that include main menu links. When you click on the tabs, they expand, revealing the featured content. No matter the page you open, the other tabs stay visible on the screen so you can quickly go to some other section on the site. Inner pages are split into several parts using grid lines. On the left-hand side, they usually include animated geometric shapes, such as circles, while other areas on the page include information about the studio and what they do.
Embassy of Internet is an experimental platform created with the scope of encouraging discussions about the future of the Internet and its role in our society. Even though this project is no longer active, we added it to our list because of the creative use of tabs on the site. When you hover over each section, a short description of the pages appears. At the same time, the color of typography and the background invert. The blue color used on the page is very specific – it resembles the blue screen of death we used to see in older versions of Windows, giving the site a retro feel. The homepage also evokes strong brutalist vibes. It includes attention-grabbing, large, uppercase sans serif typography and there are almost no visuals save for the pulsating large blue circle at the bottom right corner of the screen. Even though the entire website is text-based, you never feel bored exploring it. The combination of blue and grey hues makes the pages exciting to the eye, luring you into reading more about the project.
EDA Architects is an architecture, interior design, and planning firm. On their website, the menu sections are presented as vertical tabs. There is an element of surprise when exploring the site because you can’t even see a glimpse of the content behind the tabs. Some pages include a fullscreen slider while others feature exciting galleries. Animation effects are terrific, especially the scroll-triggered animations added to the “About” page. At one point, you enjoy a fullscreen photo. Then, on scroll, the screen splits in two, with one image on each side. Then, a small photo remains on one side while the accompanying text appears on the right. The changes on each scroll make the page appear dynamic and more fun to explore. The dominant monospace typography amplifies the modernist character of the studio’s buildings and wonderfully complements the minimalist vibe of some of the layouts. The pages about the services EDA provides and their contact information contain only text, but the monospace font and the use of grid lines make them beautiful to look at and explore.
Great Jones is a cookware brand founded in 2018. The main navigation is placed at the top, with gorgeous tabs inciting visitors to learn more about the company and explore their products. The colors used on the tabs are beautiful – deep shades of pink, green, and yellow serve as an appealing introduction to the site. They also stand as harbingers of what Great Jones items are like. The company is known for its colorful products and their beauty stands out against a beige background. As soon as you start to scroll down any page, the tabs disappear and the menu sections show up in the header. As soon as the transformation occurs, the menu becomes sticky, allowing users to easily go to any section of the site.
Closing Words
The brands featured on our list have nailed the tabbed navigation design. They have demonstrated that tabs are just as flexible as any other UX element and that they allow a lot of room for expressing your creativity.
As you can see, you can place tabs in the header next to each other or one below the other. Alternatively, you can make room for them on one side of the screen or display one tab and arrange that the rest of them appear on hover. If you like, you can also organize your entire content into tabs and then arrange them across the whole screen.
To make your tabs more prominent, you can consider coloring them in vivid colors. And if you feel like experimenting with hover effects, you can rely on them to further amplify the appeal of your tabbed navigation. You could have tabs change color on hover, add some animated objects to them, or increase their size. Don’t be afraid to express your creativity, but also be mindful your tabbed navigation stays clear and intuitive at all times.
