Skip to content

Dock

A bottom navigation bar for mobile apps and compact layouts, floating or in the page.

CSS only JSON Markdown Registry item

Dock

Installation

Everything ships in one stylesheet. There is nothing to import per component.

<link rel="stylesheet" href="https://mian.ro/dist/mian.css">

Prefer to own the files? /r/dock.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.

Class reference

Class / attributeDescription
mn-dockThe bar (a <nav>).
mn-dock-itemA link or button with an icon and a label; aria-current="page" marks the current one.
mn-dock-fixedFloat it at the bottom of the viewport.
mn-dock-compactIcons only (keep aria-labels).

Accessibility

  • Use <nav aria-label="…">. Keep visible labels where you can; with mn-dock-compact every item needs an aria-label.
  • Targets are at least 48 × 48 px.
Pages
Introduction Installation Theming & noodles Frameworks Accessibility Designing websites AI agents, API & MCP All components All noodles All templates
Templates
Ledger Pipeline Quanta Beacon Relay Forma Tessera Noir Villa Orsola Nido Casa Hana Kiln Nove Circle Field Notes Lumen Pace Aldini Studio Ito Orto Dot One Mist Signal 26
Actions
Button Button group Toggle group Dropdown menu Copy button Swap Hold to confirm
Forms
Field Input Textarea Select Checkbox Radio Switch Slider File input Input group Number input OTP input Rating Combobox Calendar Tag input Password field Swatch picker Time slots Seat map Option cards Date range Task list Duration picker
Data display
Typography Avatar Badge Chip Card Table List Kbd Code Stat Chart Timeline Accordion Description list Divider Skeleton Empty state Indicator Chat Tree view Kanban board Usage meter Notification list Invoice Funnel Leaderboard Product gallery Review summary Social post Profile header Comment thread Filter bar Bulk actions Curriculum Listing card KPI card Heatmap Gauge Breakdown Uptime Voice note
Feedback
Alert Toast Progress Radial progress Spinner Banner Onboarding checklist Loader Cookie consent
Overlays
Modal Drawer Popover Tooltip Command palette Hover card Context menu
Navigation
Navbar Tabs Breadcrumbs Pagination Steps Sidebar Dock Stories bar Page header
Layout & utilities
Collapse Carousel Theme controller Scroll area Mockup Dashboard grid Gradient backdrop Motion
Sections
Slides Jobs list Work grid Comparison table Changelog Integrations Contact section Page layout Site header Hero Logo cloud Feature grid Bento grid Media Testimonial Pricing Call to action Site footer Article App shell Docs layout Sign-in page Price list Team Product card Story card Agenda FAQ section Figures Process
Noodles
Mian Yangchun Linguine Penne Chitarra Shio Spaghetti Bucatini Hofun Hiyamugi Ramyeon Fettuccine Lasagne Pappardelle Paccheri Farfalle Yinzhen Quadretti Acini di pepe Kalguksu Sanuki Hakata Ditalini Juksing Kishimen LaMian Somen Capellini Longxu Misua Bún Kuzukiri Sotanghon Harusame Fensi Tokoroten Nagashi Liangfen Dangmyeon Woonsen Shirataki Cha Soba Daoxiao Pici Naengmyeon Hōtō Ramen Biangbiang Maccheroni Rigatoni Fusilli Jjajang Laksa Soba Tagliatelle Tajarin Mafaldine Corzetti Inaniwa Yifu Udon Gnocchi Cavatelli Orecchiette Mee Mixian Pho
↑↓navigate↵openescclose
Choose a noodle

Minimal

Flat

Pixel

Linear

Thin

Glass

Textured

Bold

Elegant

Rounded
On this page