tessl/pypi-dash-mantine-components
Plotly Dash Components based on the Mantine React Components Library, providing over 90 high-quality UI components for building dashboards and web applications.
—
Pending
navigation.mddocs/
Navigation Components
Navigation elements including menus, tabs, breadcrumbs, tooltips, and popovers for creating intuitive user navigation experiences.
Capabilities
Menu System
Dropdown menus for organizing navigation and actions.
def Menu(
children=None, # Menu content
opened=False, # Menu open state
trigger="click", # "click" | "hover"
position="bottom", # Menu position relative to trigger
offset=5, # Distance from trigger
closeOnItemClick=True, # Close menu when item clicked
**kwargs
):
"""
Dropdown menu container.
Parameters:
- children: MenuTarget and MenuDropdown components
- opened: Control menu open state
- trigger: How menu opens
- position: Menu position relative to trigger
- offset: Distance from trigger in pixels
- closeOnItemClick: Auto-close on item selection
"""
def MenuTarget(
children=None, # Trigger element
**kwargs
):
"""
Menu trigger element.
Parameters:
- children: Element that triggers menu (Button, etc.)
"""
def MenuDropdown(
children=None, # Menu items
**kwargs
):
"""
Menu dropdown content container.
Parameters:
- children: MenuItem, MenuLabel, MenuDivider components
"""
def MenuItem(
children=None, # Item content
icon=None, # Item icon
rightSection=None, # Right-side content
disabled=False, # Disabled state
color="blue", # Item color when focused
**kwargs
):
"""
Individual menu item.
Parameters:
- children: Item text/content
- icon: Left-side icon
- rightSection: Right-side content (shortcut, etc.)
- disabled: Disable item interaction
- color: Highlight color
"""
def MenuLabel(
children=None, # Label text
**kwargs
):
"""
Menu section label.
Parameters:
- children: Label text content
"""
def MenuDivider(**kwargs):
"""
Menu separator line.
"""Tab System
Tabbed navigation for organizing content into sections.
def Tabs(
children=None, # Tab content
value=None, # Active tab value
defaultValue=None, # Default active tab
orientation="horizontal", # "horizontal" | "vertical"
placement="top", # "top" | "bottom" | "left" | "right"
color="blue", # Active tab color
variant="default", # "default" | "outline" | "pills"
radius="sm", # Border radius
**kwargs
):
"""
Tab container component.
Parameters:
- children: TabsList and TabsPanel components
- value: Currently active tab value
- defaultValue: Initially active tab
- orientation: Tab layout direction
- placement: Tab list position
- color: Active tab color
- variant: Tab style variant
- radius: Border radius
"""
def TabsList(
children=None, # Tab buttons
position="left", # "left" | "center" | "right"
grow=False, # Tabs fill available width
**kwargs
):
"""
Container for tab navigation buttons.
Parameters:
- children: TabsTab components
- position: Tab alignment
- grow: Whether tabs expand to fill width
"""
def TabsTab(
children=None, # Tab label
value=None, # Tab identifier value
disabled=False, # Disabled state
icon=None, # Tab icon
rightSection=None, # Right-side content
**kwargs
):
"""
Individual tab navigation button.
Parameters:
- children: Tab label text
- value: Unique tab identifier
- disabled: Disable tab interaction
- icon: Left-side icon
- rightSection: Right-side content
"""
def TabsPanel(
children=None, # Panel content
value=None, # Associated tab value
**kwargs
):
"""
Tab content panel.
Parameters:
- children: Content to show when tab is active
- value: Tab identifier this panel belongs to
"""Popover System
Floating content that appears on interaction.
def Popover(
children=None, # Popover content
opened=False, # Popover open state
position="bottom", # Position relative to target
offset=5, # Distance from target
width="target", # Popover width
shadow="md", # Popover shadow
radius="sm", # Border radius
withArrow=False, # Show arrow pointer
arrowSize=7, # Arrow size
**kwargs
):
"""
Popover container component.
Parameters:
- children: PopoverTarget and PopoverDropdown
- opened: Control popover visibility
- position: Position relative to target
- offset: Distance from target
- width: Popover width ("target" or number)
- shadow: Popover shadow intensity
- withArrow: Show arrow pointing to target
- arrowSize: Arrow size in pixels
"""
def PopoverTarget(
children=None, # Target element
**kwargs
):
"""
Popover trigger element.
Parameters:
- children: Element that triggers popover
"""
def PopoverDropdown(
children=None, # Popover content
**kwargs
):
"""
Popover content container.
Parameters:
- children: Content to display in popover
"""Tooltip System
Informational tooltips for providing context and help.
def Tooltip(
children=None, # Target element
label="", # Tooltip text
position="top", # Tooltip position
offset=5, # Distance from target
color="dark", # Tooltip background color
radius="sm", # Border radius
multiline=False, # Allow multiline text
width="auto", # Tooltip width
withArrow=False, # Show arrow
arrowSize=4, # Arrow size
opened=None, # Control tooltip visibility
**kwargs
):
"""
Tooltip component for contextual information.
Parameters:
- children: Element to attach tooltip to
- label: Tooltip text content
- position: Position relative to target
- offset: Distance from target
- color: Tooltip background color
- radius: Border radius
- multiline: Allow text wrapping
- width: Tooltip width constraint
- withArrow: Show arrow pointer
- opened: Manual control of visibility
"""
def FloatingTooltip(
children=None, # Target element
label="", # Tooltip text
disabled=False, # Disable tooltip
**kwargs
):
"""
Advanced floating tooltip with better positioning.
Parameters:
- children: Element to attach tooltip to
- label: Tooltip text content
- disabled: Disable tooltip display
"""HoverCard System
Rich content cards that appear on hover.
def HoverCard(
children=None, # HoverCard content
width=300, # Card width
shadow="md", # Card shadow
radius="sm", # Border radius
openDelay=0, # Delay before opening
closeDelay=150, # Delay before closing
position="bottom", # Position relative to target
withArrow=False, # Show arrow pointer
**kwargs
):
"""
Rich hover card component.
Parameters:
- children: HoverCardTarget and HoverCardDropdown
- width: Card width in pixels
- shadow: Card shadow intensity
- radius: Border radius
- openDelay: Delay before showing (ms)
- closeDelay: Delay before hiding (ms)
- position: Card position relative to target
- withArrow: Show arrow pointer
"""
def HoverCardTarget(
children=None, # Target element
**kwargs
):
"""
HoverCard trigger element.
Parameters:
- children: Element that triggers hover card
"""
def HoverCardDropdown(
children=None, # Card content
**kwargs
):
"""
HoverCard content container.
Parameters:
- children: Rich content to display in card
"""Breadcrumb Navigation
Hierarchical navigation showing current location.
def Breadcrumbs(
children=None, # Breadcrumb items
separator=">", # Separator between items
separatorMargin="xs", # Margin around separator
**kwargs
):
"""
Breadcrumb navigation component.
Parameters:
- children: List of navigation items (Anchor, Text, etc.)
- separator: Character/element between items
- separatorMargin: Spacing around separator
"""Pagination
Page navigation for large datasets.
def Pagination(
total=1, # Total number of pages
value=1, # Current page
siblings=1, # Sibling pages shown
boundaries=1, # Boundary pages shown
size="md", # Pagination size
radius="sm", # Border radius
color="blue", # Active page color
disabled=False, # Disable all controls
withEdges=True, # Show first/last buttons
**kwargs
):
"""
Pagination navigation component.
Parameters:
- total: Total number of pages
- value: Currently active page number
- siblings: Pages shown around current page
- boundaries: Pages shown at start/end
- size: Control size
- radius: Border radius
- color: Active page color
- disabled: Disable interaction
- withEdges: Show first/last page buttons
"""Navigation Links
Styled navigation link components.
def NavLink(
children=None, # Link content
label="", # Link text
description="", # Subtitle text
icon=None, # Left icon
rightSection=None, # Right content
active=False, # Active state
disabled=False, # Disabled state
variant="light", # "light" | "filled" | "subtle"
color="blue", # Active color
**kwargs
):
"""
Navigation link component.
Parameters:
- children: Child NavLink components for nesting
- label: Main link text
- description: Subtitle text
- icon: Left-side icon
- rightSection: Right-side content
- active: Highlight as active
- disabled: Disable interaction
- variant: Link style
- color: Active state color
"""
def Anchor(
children=None, # Link content
href="#", # Link URL
target=None, # Link target
**kwargs
):
"""
Styled anchor link component.
Parameters:
- children: Link text/content
- href: Link destination URL
- target: Link target (_blank, etc.)
"""Usage Examples
Dropdown Menu
import dash_mantine_components as dmc
menu = dmc.Menu([
dmc.MenuTarget([
dmc.Button("Open Menu", variant="outline")
]),
dmc.MenuDropdown([
dmc.MenuLabel("Application"),
dmc.MenuItem("Settings", icon="⚙️"),
dmc.MenuItem("Messages", icon="💬", rightSection="⌘K"),
dmc.MenuDivider(),
dmc.MenuLabel("Danger Zone"),
dmc.MenuItem("Delete Account", icon="🗑️", color="red")
])
])Tab Navigation
tabs = dmc.Tabs([
dmc.TabsList([
dmc.TabsTab("Overview", value="overview", icon="📊"),
dmc.TabsTab("Analytics", value="analytics", icon="📈"),
dmc.TabsTab("Settings", value="settings", icon="⚙️")
]),
dmc.TabsPanel([
dmc.Text("Overview content goes here...")
], value="overview"),
dmc.TabsPanel([
dmc.Text("Analytics content goes here...")
], value="analytics"),
dmc.TabsPanel([
dmc.Text("Settings content goes here...")
], value="settings")
], value="overview")Tooltip and Popover
interactive = dmc.Group([
dmc.Tooltip([
dmc.Button("Hover for tooltip")
], label="This is a helpful tooltip"),
dmc.Popover([
dmc.PopoverTarget([
dmc.Button("Click for popover")
]),
dmc.PopoverDropdown([
dmc.Stack([
dmc.Text("Popover Content", weight=500),
dmc.Text("This is more detailed information in a popover."),
dmc.Button("Action", size="sm")
])
])
], width=300, withArrow=True)
])Navigation Structure
navigation = dmc.Stack([
dmc.Breadcrumbs([
dmc.Anchor("Home", href="/"),
dmc.Anchor("Products", href="/products"),
dmc.Text("Laptops")
]),
dmc.Stack([
dmc.NavLink(
label="Dashboard",
icon="📊",
active=True
),
dmc.NavLink(
label="Products",
icon="📦",
children=[
dmc.NavLink(label="All Products"),
dmc.NavLink(label="Categories"),
dmc.NavLink(label="Inventory")
]
),
dmc.NavLink(
label="Orders",
icon="🛒",
rightSection=dmc.Badge("12", size="sm")
)
], spacing="xs"),
dmc.Pagination(total=20, value=1, siblings=2)
])Install with Tessl CLI
npx tessl i tessl/pypi-dash-mantine-components