Create front-end style guides in minutes

Try for free See features

14 patterns found for tag navigation

horizontal-module-tabs

Horizontal Module Tabs separates content into different panes, and the panes can be viewed one at a time. Tabs are arranged horizontally above (sometimes below) the content, and the selected tab i...

Written by: Janne Lammi

Horizontal Module Tabs

An accordion is a grouped set of collapsible panels that the user can open and close by hovering on or clicking on the title of a specific panel. Accordion allows organizing the content into logic...

Written by: Janne Lammi

Accordion

</>

Navigation list provides a simple and easy way to build groups of navigation links with optional headers. They&#8217;re best used in the sidebars of a Website/Web app.

Written by: Janne Lammi

Navigation List

</>

When there are too many search results to comfortably fit on a single page, split the results into separate pages. Let the user to navigate between pages using a pagination control. The ultra simp...

Written by: Janne Lammi

Multicon-page pagination

</>
navigation-tabs

Tab-based navigation consists of buttons or tabs aligned side by side and it is usually located at the top of the page. Navigation tabs help the users know where they are and find their way around...

Written by: Janne Lammi

Navigation Tabs

vertical-module-tabs

Vertical Module Tabs separates content into different panes, and the panes can be viewed one at a time. This pattern can also be used to show selection-dependent inputs on a form (show initial que...

Written by: Janne Lammi

Vertical Module Tabs

breadcrumbs

Breadcrumbs show where the page is located in the website hierarchy (Location breadcrumbs), or the attributes the user has chosen while refining the search (Attribute breadcrumbs). Breadcrumbs are...

Written by: Janne Lammi

Breadcrumbs

search-pagination

When there are too many search results to comfortably fit on a single page, split the results into separate pages. Allow the user to navigate between pages using a pagination (paging) control. Fl...

Written by: Janne Lammi

Search Pagination

tag-an-object

Tags are keywords that are used to make information (e.g. pictures, computer files, books) easier to find. Encourage users add their own tags to objects and let them manage existing tags to build...

Written by: Janne Lammi

Tag an Object

endless-scrolling

The most common way to handle large data sets on websites is to use Search Pagination pattern. Endless scrolling provides an alternative way to get to additional content. When the user scrolls dow...

Written by: Janne Lammi

Endless Scrolling

overlay

An overlay is a mini page in a layer on top of a page. Overlays simplify the user interface and provide a way for the user to access additional information without leaving current page. It is also...

Written by: Janne Lammi

Overlay

one-page-wizard

Guide the user through a task with several steps by showing a clear path to completion. CampaignMonitor uses a static One Page Wizard for signing up. Sign up process is quite simple &#8211; the pr...

Written by: Janne Lammi

One Page Wizard

refining-search

Allow user to refine search results in real time using multiple filters in any order until the desired items are found. Kayak.com hotel search is a typical example of Refining Search pattern. Sea...

Written by: Janne Lammi

Refining Search

multiple-page-wizard

Present each major step in a task on a different page. Indicate clearly where the user is in the process, and how many steps there are left. Finnair uses Multiple Page Wizard to guide the user thr...

Written by: Janne Lammi

Multiple Page Wizard