Navigation Menu

from starhtml import *

Div(
    NavigationMenu(
        NavigationMenuList(
            NavigationMenuItem(
                NavigationMenuTrigger("Getting Started"),
                NavigationMenuContent(
                    NavigationMenuListContent(
                        Div(
                            NavigationMenuLink(
                                Div(
                                    "StarUI",
                                    cls="mb-2 text-lg font-medium",
                                ),
                                P(
                                    "Components you copy-paste. No npm install. No node_modules.",
                                    cls="text-sm leading-tight text-muted-foreground",
                                ),
                                href="#",
                                cls="flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none select-none focus:shadow-md",
                            ),
                            cls="row-span-3",
                        ),
                        NavigationMenuListItem(
                            P(
                                "How to install dependencies and structure your app.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Installation",
                            href="#",
                        ),
                        NavigationMenuListItem(
                            P(
                                "Styles for headings, paragraphs, lists, and inline code.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Typography",
                            href="#",
                        ),
                        NavigationMenuListItem(
                            P(
                                "Colors, spacing, and dark mode configuration.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Theming",
                            href="#",
                        ),
                    ),
                ),
            ),
            NavigationMenuItem(
                NavigationMenuTrigger("Components"),
                NavigationMenuContent(
                    NavigationMenuListContent(
                        NavigationMenuListItem(
                            P(
                                "A callout for drawing attention to important information.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Alert",
                            href="#",
                        ),
                        NavigationMenuListItem(
                            P(
                                "Trigger actions and events with multiple style variants.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Button",
                            href="#",
                        ),
                        NavigationMenuListItem(
                            P(
                                "Group related content with header, body, and footer sections.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Card",
                            href="#",
                        ),
                        NavigationMenuListItem(
                            P(
                                "A modal overlay for confirmations, forms, and focused tasks.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Dialog",
                            href="#",
                        ),
                        NavigationMenuListItem(
                            P(
                                "Toggle sections of content open and closed.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Accordion",
                            href="#",
                        ),
                        NavigationMenuListItem(
                            P(
                                "Switch between different views with tabbed navigation.",
                                cls="line-clamp-2 text-sm leading-snug text-muted-foreground",
                            ),
                            title="Tabs",
                            href="#",
                        ),
                        cls="lg:grid-cols-2",
                    ),
                ),
            ),
            NavigationMenuItem(
                NavigationMenuLink("Documentation", href="#"),
            ),
        ),
    ),
    cls="flex min-h-[300px] items-center justify-center",
)