Composants

Navigation

Onglets, barres, menus et fils d’Ariane pour se déplacer.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 63

Chargement de l’index de recherche complet.

Dock menu

1528Dock menuNavigationUn dock inférieur dont les icônes prennent leur taille en fonction de la distance du pointeur, avec une étiquette au-dessus de l'icône sous le curseur et un point sous celle active.

ARIA Tablist Resize

1914ARIA Tablist ResizeNavigationUne liste d'onglets itinérants entièrement accessible avec une surbrillance de pilule glissante, où le cadre du panneau se redimensionne en douceur selon le contenu de l'onglet affiché.

Auto height tabs

1916Auto height tabsNavigationUn groupe d'onglets dont le conteneur de contenu redimensionne progressivement sa hauteur pour s'adapter à chaque panneau lorsque vous changez d'onglet, au lieu de sauter ou de laisser un espace vide.

Bare Sliding Tab Strip

1920Bare Sliding Tab StripNavigationUne bande d'onglets unstyled-by-default dont les panneaux sont placés côte à côte sur une pellicule qui glisse latéralement sur l'interrupteur tandis que la hauteur du cadre s'adapte facilement.

Card blur tabs

1928Card blur tabsNavigationOnglets encadrés dans une carte bordée dont le contenu est brièvement flou et fondu lorsque vous changez de panneau, avec une pilule coulissante derrière l'étiquette de l'onglet actif.

Collapsible app sidebar

1939Collapsible app sidebarNavigationUne barre latérale d'application complète avec des liens de navigation regroupés, une mise en surbrillance d'un élément actif, une bascule qui le réduit à un rail contenant uniquement des icônes et un tiroir coulissant sur les écrans étroits.

1940Collapsible Icon SidebarNavigationUn shell d'application complet avec une barre latérale gauche qui se réduit à la largeur d'une icône uniquement, des sections de menu imbriquées qui se développent et une surbrillance qui glisse entre les lignes de menu.

Flyout Menu Highlight

1963Flyout Menu HighlightNavigationUn menu déroulant dont les éléments se trouvent sous une zone de surbrillance qui glisse d'une ligne survolée ou ciblée à la suivante, avec un sous-menu imbriqué qui vole sur le côté.

1981Icon label tabsNavigationUne rangée de puces d'onglet icon-and-label avec une surbrillance coulissante, où le panneau situé en dessous glisse dans la direction de l'onglet choisi.

Keyboard pill tabs

1986Keyboard pill tabsNavigationUn sélecteur à deux onglets avec une surbrillance de pilule qui glisse entre les étiquettes et une navigation complète au clavier itinérant entre les onglets.

Adjacent hover menubar

2106Adjacent hover menubarNavigationUne barre de menus de style bureau où cliquer sur un menu l'ouvre, et une fois ouvert, survoler n'importe quel menu adjacent passe directement à celui-ci sans un clic supplémentaire.

App Menubar

2107App MenubarNavigationUne barre de menu horizontale de style bureau dans laquelle cliquer sur une étiquette de niveau supérieur ouvre sa liste déroulante, et une fois l'une ouverte, le survol des autres étiquettes passe directement à leurs menus sans un clic supplémentaire.

Auto-Hide Nav Bar

2111Auto-Hide Nav BarNavigationUne barre supérieure collante qui glisse hors de vue lorsque le visiteur fait défiler vers le bas et revient dès qu'il fait défiler vers le haut.

Chameleon pill navbar

2120Chameleon pill navbarNavigationUne rangée de liens de navigation dans une capsule sombre où le lien actif se divise en sa propre pilule et le reste se referme autour d'elle.

Collapsing trail breadcrumb

2123Collapsing trail breadcrumbNavigationUn chemin avec des séparateurs à chevrons dont les marches du milieu se transforment en un bouton points de suspension qui ouvre un menu des marches cachées.

2149Expanding icon toolbarNavigationUne rangée de boutons d'icônes circulaires où l'outil sélectionné se transforme en une pilule remplie avec son étiquette, plus une cloche qui ouvre une liste de notifications et une pilule de verrouillage à deux états.

Expanding label toolbar

2150Expanding label toolbarNavigationUne rangée de boutons d'outils d'icônes où celui sélectionné se développe pour afficher son étiquette, avec une bulle de confirmation flottante et une bascule de verrouillage séparée.

Grouped magnify dock

2162Grouped magnify dockNavigationUn dock inférieur composé de boutons d'icônes ronds divisés en deux groupes qui s'agrandissent à mesure que le pointeur se rapproche de chacun.

Grouped settings dropdown

2163Grouped settings dropdownNavigationUne liste déroulante déclenchée par un bouton avec des sections étiquetées, un sous-menu imbriqué et un groupe radio pour choisir l'une des nombreuses valeurs de paramètres.

Inline command list

2173Inline command listNavigationUn champ de recherche sur des lignes d'action groupées et filtrables qui se rétrécit à mesure que vous tapez et déplace une surbrillance avec les touches fléchées, destiné à rester en ligne plutôt que dans une boîte de dialogue.

2188Magnifying icon dockNavigationUne rangée d'icônes d'application dans une barre translucide qui s'agrandit à mesure que le pointeur se rapproche de chacune d'elles, revenant à sa taille normale lorsque le pointeur s'éloigne.

Morphing Pill Navbar

2194Morphing Pill NavbarNavigationUne rangée d'étiquettes de navigation dans une pilule sombre où l'étiquette active se divise en sa propre pilule remplie et les étiquettes restantes se regroupent en une deuxième pilule qui reflue autour d'elle.

Bubble burst menu

2309Bubble burst menuNavigationUne pilule à logo flottant et une bascule qui se transforment en une superposition plein écran de liens de pilule surdimensionnés, chacun se mettant en place avec un décalage élastique.

Circle reveal sidebar

2318Circle reveal sidebarNavigationUn panneau de menu qui s'ouvre sous la forme d'un cercle s'élevant à partir de sa propre bascule, avec des lignes apparaissant en séquence et les barres de bascule se repliant en croix.

Collapsible App Sidebar

2322Collapsible App SidebarNavigationUne barre latérale d'application avec des liens de navigation groupés qui se réduit à un rail composé uniquement d'icônes, se glisse en superposition sur des écrans étroits et bascule avec un raccourci clavier.

Dot Scale Page Indicator

2338Dot Scale Page IndicatorNavigationUne bande de pagination minimale de petits points numérotés qui s'agrandissent et s'éclaircissent au survol ou lorsqu'ils sont actifs, flanqués de liens texte précédents et suivants qui s'estompent lorsqu'ils sont désactivés.

Dropdown Action Menu

2344Dropdown Action MenuNavigationUn menu déroulant déclenché par un bouton avec des éléments groupés, des étiquettes de raccourci clavier alignées à droite et une ligne de style bascule, se fermant automatiquement après la plupart des sélections.

Expanding card navbar

2349Expanding card navbarNavigationUne barre de navigation mince et arrondie dont la bascule hamburger l'étend vers le bas en une rangée de cartes de liens colorées, les liens de chaque carte étant visibles.

Filterable action list

2354Filterable action listNavigationUn champ de recherche associé à une liste d'actions filtrées en direct et regroupées sous des étiquettes, mettant en évidence la première correspondance et affichant un état vide lorsque rien ne correspond à la requête.

Gooey Particle Nav

2359Gooey Particle NavNavigationUne liste de navigation horizontale dans laquelle la sélection d'un élément transforme une pilule gluante floue vers la nouvelle position tandis qu'une explosion de petites particules se disperse vers l'extérieur.

2361Grouped icon toolbarNavigationUne barre d'outils horizontale compacte qui regroupe les boutons d'icônes en groupes divisés par de fins séparateurs, pour des actions rapides de type formatage.

Hover duplicate text nav

2365Hover duplicate text navNavigationUne liste de navigation verticale fait glisser chaque étiquette vers le haut et vers le haut en survol, tandis qu'une étiquette en double glisse par le bas pour prendre sa place.

Hover slide nav labels

2366Hover slide nav labelsNavigationUne liste de navigation verticale dans laquelle le survol ou la mise au point d'une étiquette fait glisser une copie en double vers le haut tandis que l'original glisse, de sorte que l'étiquette semble s'actualiser.

2382Magnifying icon dockNavigationUn dock de style macOS composé de boutons d'icônes circulaires qui s'agrandissent doucement à mesure que le pointeur s'en approche et révèlent une étiquette au-dessus de l'icône active.

Marquee reveal menu

2383Marquee reveal menuNavigationUne pile de lignes pleine hauteur où le survol d'une ligne fait glisser une bande colorée défilante de son étiquette et une vignette à partir du bord le plus proche du pointeur.

Mega nav menu

2386Mega nav menuNavigationUne barre de navigation supérieure horizontale dont les déclencheurs ouvrent une liste déroulante ou des méga-panneaux partageant une fenêtre animée qui se redimensionne pour s'adapter au contenu de chaque panneau.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Adjacent hover menubar
Une barre de menus de style bureau où cliquer sur un menu l'ouvre, et une fois ouvert, survoler n'importe quel menu adjacent passe directement à celui-ci sans un clic supplémentaire.
App Menubar
Une barre de menu horizontale de style bureau dans laquelle cliquer sur une étiquette de niveau supérieur ouvre sa liste déroulante, et une fois l'une ouverte, le survol des autres étiquettes passe directement à leurs menus sans un clic supplémentaire.
ARIA Tablist Resize
Une liste d'onglets itinérants entièrement accessible avec une surbrillance de pilule glissante, où le cadre du panneau se redimensionne en douceur selon le contenu de l'onglet affiché.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)