Composants

navigation

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

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

21 sur 21

1533Morph menu iconIcônesUn bouton de menu dont les trois barres se transforment en croix et reviennent, le barreau du milieu se rétractant lorsque les deux barreaux extérieurs se croisent.

Pill tabs

1537Pill tabsNavigationUne bande d'onglets où une seule pilule glisse et s'étire sur l'onglet sélectionné, avec une flèche, des touches de navigation Début et Fin et un panneau qui effectue un fondu enchaîné.

1710Icon label toolbarBoutonsUne barre d'outils compacte composée de boutons d'icônes silencieux, chacun dessiné dans sa propre teinte, avec un bouton de retour dont l'étiquette se déploie hors de l'icône au survol.

Underline tabs

2077Underline tabsNavigationUne rangée d'onglets de section avec une barre colorée qui glisse et se redimensionne sous l'étiquette active au lieu d'un arrière-plan rempli.

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.

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.

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.

Quick launch palette

2212Quick launch paletteNavigationUne palette de commandes déclenchée par le clavier qui s'ouvre avec un ressort, filtre une liste d'actions groupées au fur et à mesure que vous tapez et prend en charge la navigation complète par touches fléchées.

Sliding content tabs

2232Sliding content tabsNavigationUne fenêtre d'affichage de contenu associée à une barre d'onglets de capsule en dessous, où le changement d'onglet fait glisser le panneau depuis le côté de l'onglet choisi tandis qu'une surbrillance colorée glisse derrière l'étiquette active.

Sliding height tabs

2233Sliding height tabsNavigationLes onglets encadrés dans une carte où les panneaux de commutation font glisser l'ensemble du contenu sur le côté comme une pellicule tandis que la hauteur de la carte s'adapte au nouveau panneau.

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.

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.

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.

Trail breadcrumbs

2455Trail breadcrumbsNavigationUn fil d'Ariane horizontal avec des séparateurs entre chaque étape, des liens d'ancêtres en sourdine, une page actuelle en gras et des points de suspension qui réduisent les longs chemins.

Cross morph menu button

2502Cross morph menu buttonBoutonsUne fine icône de menu à trois barres qui se replie en une croix rapprochée, les barres extérieures se déplaçant vers la ligne centrale avant de se diviser et de se recolorer.

Pivot bars menu button

2503Pivot bars menu buttonBoutonsUn bouton de menu dont les trois barres irrégulières oscillent d'un quart de tour et se rétrécissent en une courte colonne de points, changeant de couleur au fur et à mesure.

Return to top chip

2505Return to top chipBoutonsUne petite puce de coin qui glisse dans la vue une fois que son panneau défile au-delà d'un seuil, se soulève sous le pointeur et fait glisser le panneau vers le haut en cliquant.

Caret tail link

2508Caret tail linkBoutonsUn lien texte discret avec un petit crochet angulaire juste après sa dernière lettre, qui glisse vers l'extérieur et est souligné au survol.

Growing back arrow

2576Growing back arrowBoutonsUne commande arrière nue avec une flèche gauche qui grandit et étire son arbre en vol stationnaire, puis s'enclenche pour se reposer lorsqu'on appuie dessus.

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.

Auto-Hide Nav Bar
Une 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.
Bubble burst menu
Une 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.
Caret tail link
Un lien texte discret avec un petit crochet angulaire juste après sa dernière lettre, qui glisse vers l'extérieur et est souligné au survol.

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)