Breadcrumb

from starhtml import *
from starui import *

Breadcrumb(
    BreadcrumbList(
        BreadcrumbItem(
            BreadcrumbLink("Home", href="/")
        ),
        BreadcrumbSeparator(
            Icon("lucide:slash", cls="h-4 w-4 align-middle")
        ),
        BreadcrumbItem(
            BreadcrumbLink("Library", href="/library")
        ),
        BreadcrumbSeparator(
            Icon("lucide:slash", cls="h-4 w-4 align-middle")
        ),
        BreadcrumbItem(
            BreadcrumbPage("Data")
        )
    )
)

from starhtml import *
from starui import *

Breadcrumb(
    BreadcrumbList(
        BreadcrumbItem(
            BreadcrumbLink("Home", href="/")
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbEllipsis()
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbLink("Components", href="/docs/components")
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbPage("Breadcrumb")
        )
    )
)

from starhtml import *
from starui import *

Breadcrumb(
    BreadcrumbList(
        BreadcrumbItem(
            BreadcrumbLink("Home", href="/")
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbLink("Documentation", href="/docs")
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbLink("Components", href="/docs/components")
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbLink("Navigation", href="/docs/components/navigation")
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbPage("Breadcrumb")
        )
    )
)

from starhtml import *
from starui import *

Breadcrumb(
    BreadcrumbList(
        BreadcrumbItem(
            BreadcrumbLink(
                Icon("lucide:home", cls="h-4 w-4 mr-1 inline-block align-text-bottom"),
                "Home",
                href="/"
            )
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbLink(
                Icon("lucide:folder", cls="h-4 w-4 mr-1 inline-block align-text-bottom"),
                "Documents",
                href="/documents"
            )
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbLink(
                Icon("lucide:folder", cls="h-4 w-4 mr-1 inline-block align-text-bottom"),
                "Projects",
                href="/documents/projects"
            )
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbPage(
                Icon("lucide:file-text", cls="h-4 w-4 mr-1 inline-block align-text-bottom"),
                "README.md"
            )
        )
    )
)

from starhtml import *
from starui import *

path_items = [
    ("Shop", "/shop"),
    ("Electronics", "/shop/electronics"),
    ("Smartphones", "/shop/electronics/smartphones"),
    ("Apple", "/shop/electronics/smartphones/apple"),
    ("iPhone 15 Pro", None)
]

separator = BreadcrumbSeparator(Icon("lucide:chevron-right", cls="h-4 w-4"))

breadcrumb_items = []
for i, (label, href) in enumerate(path_items):
    item = BreadcrumbItem(BreadcrumbLink(label, href=href) if href else BreadcrumbPage(label))
    breadcrumb_items.append(item)

    if i < len(path_items) - 1:
        breadcrumb_items.append(separator)

Breadcrumb(BreadcrumbList(*breadcrumb_items))

from starhtml import *
from starui import *

Div(
    Breadcrumb(
        BreadcrumbList(
            BreadcrumbItem(BreadcrumbLink("Blog", href="/blog")),
            BreadcrumbSeparator(Span("•", cls="px-2 text-muted-foreground")),
            BreadcrumbItem(BreadcrumbLink("Technology", href="/blog/tech")),
            BreadcrumbSeparator(Span("•", cls="px-2 text-muted-foreground")),
            BreadcrumbItem(BreadcrumbPage("AI Trends 2024"))
        ),
        cls="mb-4"
    ),
    Breadcrumb(
        BreadcrumbList(
            BreadcrumbItem(BreadcrumbLink("Settings", href="/settings")),
            BreadcrumbSeparator(Span("→", cls="px-2 text-muted-foreground")),
            BreadcrumbItem(BreadcrumbLink("Security", href="/settings/security")),
            BreadcrumbSeparator(Span("→", cls="px-2 text-muted-foreground")),
            BreadcrumbItem(BreadcrumbPage("Two-Factor Auth"))
        ),
        cls="mb-4"
    ),
    Breadcrumb(
        BreadcrumbList(
            BreadcrumbItem(BreadcrumbLink("Docs", href="/docs")),
            BreadcrumbSeparator(Span("|", cls="px-2 text-muted-foreground")),
            BreadcrumbItem(BreadcrumbLink("API", href="/docs/api")),
            BreadcrumbSeparator(Span("|", cls="px-2 text-muted-foreground")),
            BreadcrumbItem(BreadcrumbPage("Authentication"))
        )
    )
)

from starhtml import *
from starui import *

Breadcrumb(
    BreadcrumbList(
        BreadcrumbItem(
            BreadcrumbLink("Home", href="/")
        ),
        BreadcrumbSeparator(),
        BreadcrumbItem(
            BreadcrumbEllipsis(),
            cls="md:hidden"
        ),
        BreadcrumbSeparator(cls="md:hidden"),
        BreadcrumbItem(
            BreadcrumbLink("Documentation", href="/docs"),
            cls="hidden md:inline-flex"
        ),
        BreadcrumbSeparator(cls="hidden md:inline-flex"),
        BreadcrumbItem(
            BreadcrumbLink("Components", href="/docs/components"),
            cls="hidden md:inline-flex"
        ),
        BreadcrumbSeparator(cls="hidden md:inline-flex"),
        BreadcrumbItem(
            BreadcrumbPage("Breadcrumb")
        )
    )
)