Quillo.qweComponents

Tags

#navigation

63 components tagged navigation. Narrow them down with a search or more tags.

Layout 8

AppShellAn app's frame: a sidebar of links, a top bar and the page; the sidebar is a drawer on phones.layoutpagenavigationno-js10 views · 7 downloadsCollapsibleA block shown and hidden under a line you click, on the browser's own <details>; open by default or not.layoutnavigationaccessibilityno-js7 views · 6 downloadsDockA floating bar of icon buttons fixed to the bottom or a side of the page, with badges and the current one marked.layoutnavigationmobilebuttonno-js6 views · 7 downloadsFooterA site's footer: brand and tagline, columns of links under titles, and a bottom line with the small print.layoutpagenavigationlinkno-js6 views · 6 downloadsMasterDetailA list on the left and the item picked in detail on the right; one at a time with a Back button when narrow.layoutlistnavigationmobilekeyboardinteractive6 views · 6 downloadsNavbarThe bar along the top of a site: name, links and actions; the links fold into a menu when narrow.navigationlayoutmenuno-js5 views · 6 downloadsPageHeaderA page's top: breadcrumb, title, a line about it, small facts and the actions, with room under it for tabs.layoutpagenavigationno-js7 views · 5 downloadsSidebarLayoutContent beside a sidebar, left or right, that goes under the content where its box is narrow.layoutpagenavigationno-js5 views · 6 downloads

Typography 1

LinkA styled link that shows an icon and opens a new tab when it leaves the site, with underline and tone variants.typographylinknavigationno-js7 views · 8 downloads

Actions 1

MenuBarA desktop-style bar of menus (File, Edit, View) with shortcuts, ticks and the keyboard moves of a real menubar.menunavigationkeyboardinteractive5 views · 6 downloads

Feedback 1

ErrorPageA 404 or 500 page: the code large, what it means, a search box if wanted, and links to go on from.feedbackpagestatusnavigationno-js5 views · 6 downloads

Overlays 1

DrawerA panel that slides in from an edge over the page, on the browser's own <dialog>.overlaynavigationinteractive6 views · 6 downloads

Navigation 34

AccordionSections that open under their titles, on the browser's own <details>: exclusive with a group.navigationlistno-js5 views · 7 downloadsAlphabetIndexA to Z links into a list sorted by name; letters with nothing under them stay in place, disabled.navigationlinklistno-js4 views · 6 downloadsBackToTopA button in the corner that shows once the page is scrolled down and takes it back to the top.navigationbuttonutilityinteractive6 views · 8 downloadsBottomNavA fixed bar of icon tabs along the bottom of a phone's screen, with counts and the current one marked.navigationmobiletabsiconno-js6 views · 7 downloadsBreadcrumbsWhere this page sits: a trail of links up to the home page, the last one marked as this page.navigationlinkno-js5 views · 6 downloadsCollapsibleNavSide navigation in groups that fold under their titles, the browser remembering which are open.navigationmenulinkdocumentinteractive6 views · 7 downloadsDirectoryNavA long list of names grouped under sticky letter headers, with a row of letters at the top that jumps to each group.navigationlistlinkuserno-js5 views · 5 downloadsFilterTabsTabs with counts that filter a list, one selected, moved between with the arrow keys; a hidden input holds the key.navigationtabsfilterformsinteractive5 views · 6 downloadsFooterNavColumns of grouped links for a site's footer, each under its title, wrapping on narrow screens.navigationlinklayoutmarketingno-js5 views · 7 downloadsIconTabsTabs with an icon above each label and a count on its corner, the arrow keys moving between them.navigationtabsiconinteractive5 views · 6 downloadsJumpLinksA row of links to the sections of the page, scrolling sideways when narrow and sticking to the top if asked.navigationlinkpageno-js6 views · 6 downloadsLanguageSwitcherA button showing the page's language that opens the others, each in its own name, as links to the same page in it.navigationmenuselectpopoverno-js5 views · 6 downloadsLinkListA plain list of links, each with a line saying where it leads, an icon and a short note at the right.navigationlinklistno-js5 views · 6 downloadsMegaMenuA top bar whose items open wide panels of grouped links under the whole bar, on hover and from the keyboard, with no script.navigationmenulinkmarketingno-js5 views · 7 downloadsMenuA vertical list of links and actions in titled sections, with icons, shortcuts, counts, disabled items and the active one marked.navigationmenulistlinkno-js6 views · 6 downloadsMobileNavA menu button that opens the site's navigation over the whole screen, as a dialog: groups, the current page, actions at the bottom.navigationmobilemenudialoginteractive5 views · 6 downloadsNavLinkA link marked current when the page's URL is where it goes, or under it; as text, a pill or underlined.navigationlinkno-js5 views · 6 downloadsNavSearchA search box for a navbar that grows when focused, with / to reach it and Escape to clear; a real form sends it.navigationsearchinputformskeyboardinteractive5 views · 5 downloadsNotificationBellA bell with the unread count on its corner: a link, or a button that opens any panel.navigationnotificationbuttoniconno-js5 views · 8 downloadsPagerPrevious and next links with their titles, for the pages of an article, a book or docs.navigationlinkdocumentno-js6 views · 6 downloadsPaginationLinks to the pages of a long list: first, last, the ones around this page, and Previous and Next.navigationdatano-js6 views · 5 downloadsProgressNavNumbered steps as links: the ones done link back, this one is marked, and the ones to come wait their turn.navigationprogresslinkcheckoutno-js6 views · 4 downloadsScrollTabsA row of tabs that scrolls sideways when there are more than fit, with arrows at the ends and the keyboard.navigationtabsmobileinteractive5 views · 8 downloadsScrollspyLinks to the sections of a page that mark the one in view as it scrolls, down the side or in a row.navigationlinkpageinteractive5 views · 9 downloadsSideNavAn app's navigation down the side: sections, groups that open, icons, counts; it folds to its icons.navigationmenuno-js4 views · 6 downloadsSitemapListA site's pages as a nested list of links, as deep as the site goes, flowing into columns on wide screens.navigationlinklistpageno-js4 views · 5 downloadsSkipLink"Skip to content": the first link on a page, out of sight until the keyboard reaches it.navigationaccessibilitykeyboardlinkno-js5 views · 6 downloadsStepsHow far along a process is: steps done with a check mark, this one, and those to come; across or down.navigationprogressno-js5 views · 6 downloadsSubnavA second row of links under the main navigation, for one section's pages, with counts and the current one marked.navigationlinktabsno-js5 views · 5 downloadsTableOfContentsLinks to a page's headings that mark the section being read as it scrolls, and scroll smoothly there.navigationdocumentinteractive5 views · 6 downloadsTabsPanels behind a row of tabs, from radio buttons and CSS: no JavaScript, any HTML from the server.navigationtabsno-js5 views · 7 downloadsTreeViewNested items that open and close, with the arrow keys, type-ahead and optional tri-state checkboxes.navigationlistinteractive6 views · 6 downloadsUserMenuAn avatar button that opens the account menu: name and email, links, and sign out; the arrow keys move through it.navigationmenuuserpopoverinteractive5 views · 6 downloadsVerticalTabsTabs down the left with icons and a line of detail, and the selected one's panel at the right; a row above it when narrow.navigationtabssettingsinteractive4 views · 6 downloads

Data 1

ListGroupA bordered list of items with descriptions, badges and notes, as links, buttons or text, one active and some disabled.datalistnavigationno-js7 views · 6 downloads

Commerce 2

CheckoutStepsCart → Details → Payment → Done: the steps of a checkout, those done as links back, the current one marked.commercecheckoutnavigationprogressno-js5 views · 7 downloadsMiniCartA bag icon with the count that opens a small panel of the items, the subtotal and the way to the cart and checkout.commercecartpopovernavigationinteractive5 views · 8 downloads

Blogging 2

PostArchiveA blog's posts by year and month, newest first: each year a disclosure with its count, its months and their posts, or only the months as links.bloggingnavigationlistarchiveno-js10 views · 8 downloadsSeriesNavWhere a post stands in a series: Part 2 of 5, a bar of the parts, the list of them all with this one marked, and the parts before and after.bloggingnavigationserieslistno-js9 views · 7 downloads

Dashboard 1

QuickActionsA grid of big icon buttons for the common actions: links, submit buttons in a form, or on_select.dashboardbuttongridnavigationformsno-js6 views · 5 downloads

Mobile 11

AppTabBarBottom tabs for a phone app: badges, safe-area padding, a second press scrolls to the top, each tab keeps its place, gone while the keyboard is up; a rail on a tablet.mobileinteractivetabletnavigationtabskeyboard3 views · 8 downloadsBottomAppBarA bottom bar with actions and a notched floating button, hiding on scroll and standing clear of the safe area; a floating toolbar on a tablet.mobileinteractivetabletnavigationtoolbarfab3 views · 6 downloadsEdgeDrawerA navigation drawer pulled from the screen's edge: follows the finger, snaps by speed, holds the focus, closes on Back; stands beside the content on a tablet.mobileinteractivetabletgesturenavigationmenu4 views · 7 downloadsFolderBrowserFolders with breadcrumbs, a Back, and move and rename in sheets.mobileinteractivefilesnavigationtablet3 views · 6 downloadsLargeTitleBarAn iOS large title that shrinks into the bar as content scrolls, with back and action slots, tied to the scroller without jank.mobileinteractivetabletnavigationheaderscroll3 views · 6 downloadsNavRailA Material navigation rail for medium widths, with a menu, a floating action and badges, turning into a bottom bar on a phone.mobiletabletinteractivenavigationrailbar2 views · 7 downloadsNavStackA stack of screens pushed and popped with a slide, each keeping its state and scroll, with a real Back through the browser's history; a column beside the rest on a tablet.mobileinteractivetabletnavigationhistorygesture2 views · 6 downloadsRouteStepsTurn-by-turn steps with the current one large, progress, distance left and an ETA from data, moved along by a position, a swipe, buttons or keys.mobileinteractivetabletnavigationmapgesture2 views · 7 downloadsSwipeBackPull a screen away from the left edge to go back, with the previous one peeking behind; a Back button for everyone else.mobileinteractivegesturenavigationback3 views · 7 downloadsTabletSidebarA sidebar that folds to icons, then to an overlay, by width class, with sections, badges and a pin kept per device.mobiletabletinteractivenavigationsidebarlayout2 views · 3 downloadsTopAppBarA Material top bar that hides as content scrolls down, returns on the way up, and takes a tint once content passes under it.mobileinteractivetabletnavigationheaderscroll3 views · 7 downloads

Other tags

interactive504no-js370mobile211forms176tablet151data128smart100list84chart80commerce68input64navigation63layout59card57finance52gesture48media44dashboard42text39button38feedback38keyboard37social37marketing36table34typography32search31status31user31document30image28picker28link26page26time26banking25calendar24overlay24select24progress23trading22calculator21schedule21travel20grid19settings19menu18news18security18utility18offline17price17blogging16dialog16sheet16swipe15accessibility14drag14notification14tabs14upload14chat13checkout13filter13popover13file12loans12section12audio11loading11profile11coop10forex10icon10code9article8camera8developer8flights8form8print8record8validation8comment7location7onboarding7pricing7video7cart6json6theme6animation5barcode5field5health5keypad5map5planning5qr5scroll5sort5admin4analytics4clock4dates4editor4feed4header4live4notes4parser4photo4player4seo4share4statistics4subscription4toast4analysis3banner3billing3budget3checklist3compare3date3election3games3gloves3gps3haptics3monitoring3number3panes3payment3pen3rotation3sensor3sync3tasks3timeline3timer3toolbar3tracking3undo3units3update3url3voice3wheel3wizard3writing3alerts2balance2capacity2cards2colour2columns2csv2currency2dedupe2device2discount2draft2drawing2education2email2experiment2feeds2files2forecast2fuzzy2help2history2hotels2links2long-press2meetings2merge2messages2money2motion2network2otp2panel2payments2permission2permissions2photos2pin2pinch2query2questions2quiz2rating2reactions2refresh2reorder2report2responsive2retry2scanner2selection2shipping2sign-in2slider2split2stock2storage2store2stories2summary2svg2tax2ticket2till2timezone2tracker2transfer2version2wallet2zoom2accordion1activities1ads1agenda1aggregate1agile1alert1amount1annotate1anomaly1api1app-shell1approval1archive1assessment1audit1autosave1availability1back1backlog1backtest1badge1bank1bar1battery1bibliography1bill1bills1book1bracket1branching1browser1builder1bulk1bundle1business1buy1byline1campaign1carousel1cars1cash1change1changes1check1chips1citation1cleaning1clipboard1cloud1cohort1combobox1comments1compass1conditional1configurator1confirm1conflicts1contact1context-menu1contrast1conversion1converter1cooking1copy1cost1coupon1cron1curl1dark-mode1deadline1debt1decimal1decision1decode1delivery1dependencies1design1detents1diff1disclosure1documents1downloads1dst1duplicates1edit1emoji1empty1encoding1entropy1envelopes1error1event1expenses1explorer1export1fab1faq1fashion1first-run1fit1fixtures1flashcards1flashlight1flesch1floor-plan1formatter1formula1frame1fullscreen1funnel1gallery1game1generator1geofence1goals1grades1grammar1group1groups1guard1handwriting1haptic1heading1headline1heatmap1hours1http1i18n1iban1import1income1indicator1inference1insights1interest1invoice1ios1isbn1job1jsonpath1jwt1kanban1keywords1kiosk1league1learning1level1like1lint1loan1localization1lock1logs1lyrics1mail1margin1markdown1markup1master-detail1matching1memory1mention1modal1mortgage1music1natural1notch1notice1notifications1options1order1orientation1outlier1overflow1overtime1packing1pagination1passcode1password1paste1pattern1payoff1payroll1paywall1people1plans1podcast1pointer1policy1poll1power1preview1profiling1projects1properties1publishing1quality1queue1rail1ranked1ranking1readability1reader1receipt1recipe1recommendations1records1reference1refinance1regex1register1regression1reliability1reload1reply1resize1resources1restaurant1resume1retention1revision1rewards1rings1risk1roles1roster1rota1rules1salary1save-data1savings1schema1screen1seats1seeds1seek1series1shake1shortcuts1sidebar1signature1signup1sizing1slo1slug1splash1sports1spotlight1spreadsheet1sql1stack1staff1standings1startup1status-bar1stepper1steps1sticky1streaks1study1style1subscribe1subtotals1support1survey1switch1tags1team1teams1temperature1template1time-zones1tip1tldr1toggle1torch1tour1tournament1transit1translation1tree1trend1tutorial1typo1unread1unsaved1username1validate1vibrate1viewer1virtual1visualisation1vote1voting1wake-lock1warehouse1waveform1wcag1weather1weight1weights1widget1world1