Composants

dropdown

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

18 sur 18

1729Paste Format MenuBoutonsUne pilule avec un curseur qui ouvre une liste bordée de choix de mise en forme de pâte et quadrille ses coins inférieurs afin que les deux formes se lisent comme une seule pièce.

2094Sliding highlight menuSuperpositionsUn menu d'action déclenché par un bouton dans lequel une plaque arrondie glisse entre les rangées lorsque le pointeur ou les touches fléchées se déplacent, plutôt que chaque rangée ne s'éclaire d'elle-même.

2118Caption Style Date PickerChamps de saisieUn sélecteur de date unique associé à un menu de sélection qui permute son en-tête entre une liste déroulante combinée mois et année, une liste déroulante mois uniquement ou une liste déroulante année uniquement.

2121Checkable action menuSuperpositionsUn menu qui mélange des actions simples avec des rangées de cases à cocher et un ensemble à choix unique, en insérant chaque coche lorsqu'elle s'allume et en faisant glisser un point entre les choix.

2143Dropdown Date PickerChamps de saisieUn sélecteur de date d'un seul mois dont l'en-tête utilise une liste déroulante de mois et une liste déroulante d'année côte à côte, donc passer à une date distante nécessite une sélection au lieu de plusieurs clics de flèche.

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.

2176Keyboard Dropdown MenuSuperpositionsUn bouton de déclenchement ouvre une liste d'actions flottante dont l'arrière-plan en surbrillance glisse en douceur entre l'élément survolé ou focalisé sur le clavier, avec une navigation complète par touches fléchées et par saisie anticipée.

2295Account Dropdown MenuSuperpositionsUn déclencheur d'avatar qui ouvre un menu de compte groupé avec des astuces de raccourci clavier, un sous-menu de thème et une ligne de déconnexion destructrice conçue à part du reste.

2296Account Menu FlyoutSuperpositionsUn bouton de résumé de profil qui s'ouvre sur un menu de compte composé de lignes étiquetées, avec une petite ligne indicatrice incurvée qui se redresse lorsque le menu est ouvert.

2305Birthdate popover pickerChamps de saisieUn bouton étiqueté qui ouvre un calendrier flottant avec des listes déroulantes de mois et d'année pour atteindre rapidement une année de naissance, se fermant dès qu'un jour est choisi.

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.

2421Searchable SelectChamps de saisieUn bouton qui ouvre une petite fenêtre contextuelle avec un champ de recherche et une liste d'options filtrables, afin que quelqu'un puisse taper pour affiner les choix au lieu de faire défiler une longue liste déroulante.

2432Slice picker donutGraphiquesUn beignet animé par une liste déroulante dans son en-tête : la tranche choisie pousse et développe un arc extérieur détaché, tandis que le trou affiche le numéro de cette tranche.

2761Combobox fieldChamps de saisieUn champ déroulant consultable : la saisie filtre une liste d'options en direct et en choisir une remplit le champ.

2772Model picker prompt boxChamps de saisieRédigez une instruction, choisissez un modèle et joignez un fichier local avec un retour explicite.

2783Styled native dropdownChamps de saisieUne sélection native relookée avec une bordure personnalisée, une bague de mise au point et un chevron tandis que le système d'exploitation continue de fournir le menu d'options et le comportement du clavier.

2796Grouped select menuChamps de saisieUne sélection déroulante dont les options sont regroupées sous les en-têtes de section, avec des bandes de flèches de bord qui font défiler automatiquement les longues listes.

2801Compact select menuChamps de saisieUn bouton de déclenchement qui ouvre une liste flottante de choix, avec le choix actuel affiché sur le bouton et une coche à côté dans la liste.

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.

Account Dropdown Menu
Un déclencheur d'avatar qui ouvre un menu de compte groupé avec des astuces de raccourci clavier, un sous-menu de thème et une ligne de déconnexion destructrice conçue à part du reste.
Account Menu Flyout
Un bouton de résumé de profil qui s'ouvre sur un menu de compte composé de lignes étiquetées, avec une petite ligne indicatrice incurvée qui se redresse lorsque le menu est ouvert.
Birthdate popover picker
Un bouton étiqueté qui ouvre un calendrier flottant avec des listes déroulantes de mois et d'année pour atteindre rapidement une année de naissance, se fermant dès qu'un jour est choisi.

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)