Navigation

function Example() {
    const ctrl = createNavbarController();
    effect(() => () => ctrl.dispose());
    return (
        <Navbar
            ctrl={ctrl}
            label="Main"
            brand={<strong>Acme</strong>}
            items={[
                { id: "product", label: "Product", active: true },
                {
                    id: "resources",
                    label: "Resources",
                    children: [
                        { id: "docs", label: "Docs", href: "#docs" },
                        { id: "blog", label: "Blog", href: "#blog" },
                    ],
                },
                { id: "pricing", label: "Pricing", href: "#pricing" },
            ]}
        />
    );
}

type NavMenuTrigger = "hover" | "click";

type NavbarPlacement = "static" | "sticky" | "fixed";

<NavbarLink href="#pricing" active>
    Pricing
</NavbarLink>

const sections = [
    { id: "overview", label: "Overview" },
    { id: "deploys", label: "Deploys" },
    { id: "settings", label: "Settings" },
];

function Example() {
    const page = signal("deploys");
    return <SidebarNav label="Project" items={sections} value={page()} onChange={page.set} />;
}

<NavLink label="Deploys" description="History and logs" href="#deploys" active />

<Breadcrumb
    items={[
        { label: "Projects", href: "#projects" },
        { label: "marketing-site", href: "#marketing-site" },
        { label: "Deploys" },
    ]}
/>

function Example() {
    const tab = signal("deploys");
    return (
        <Tabs
            label="Project"
            value={tab()}
            onChange={tab.set}
            items={[
                { id: "overview", label: "Overview", panel: <Text>Traffic and status at a glance.</Text> },
                {
                    id: "deploys",
                    label: "Deploys",
                    badge: "12",
                    panel: <Text>Every push creates a deploy.</Text>,
                },
                { id: "settings", label: "Settings", panel: <Text>Domains, builds and access.</Text> },
            ]}
        />
    );
}

function Example() {
    const step = signal("shipping");
    return (
        <Steps
            label="Checkout"
            items={[
                { id: "cart", label: "Cart" },
                { id: "shipping", label: "Shipping", description: "Address and method" },
                { id: "payment", label: "Payment" },
            ]}
            value={step()}
            onChange={step.set}
        />
    );
}

function Example() {
    const page = signal(3);
    return <Pagination page={page()} pageCount={12} onChange={page.set} />;
}

function Example() {
    const slide = signal(1);
    return (
        <Stack gap="0.5rem">
            <DotPagination count={5} value={slide()} onChange={slide.set} />
            <Text muted>Slide {slide() + 1} of 5</Text>
        </Stack>
    );
}

function Example() {
    const pages = ["Installation", "Theming", "Customization", "Accessibility"];
    const page = signal(1);
    return (
        <Stack gap="0.5rem">
            <Text>
                Reading: <strong>{pages[page()]}</strong>
            </Text>
            <NextPrev
                prevLabel={pages[page() - 1] ?? "Start"}
                nextLabel={pages[page() + 1] ?? "End"}
                prevDisabled={page() === 0}
                nextDisabled={page() === pages.length - 1}
                onPrev={() => page.set(page() - 1)}
                onNext={() => page.set(page() + 1)}
            />
        </Stack>
    );
}

<BackLink href="#projects">
    All projects
</BackLink>

function Example() {
    const filter = signal("all");
    return (
        <Subnav
            label="Filter"
            value={filter()}
            onChange={filter.set}
            items={[
                { id: "all", label: "All" },
                { id: "production", label: "Production" },
                { id: "preview", label: "Preview" },
            ]}
        />
    );
}

function Example() {
    const section = signal("home");
    return (
        <Iconnav
            label="Workspace"
            value={section()}
            onChange={section.set}
            items={[
                { id: "home", icon: "home", label: "Home" },
                { id: "alerts", icon: "bell", label: "Alerts" },
                { id: "settings", icon: "settings", label: "Settings" },
            ]}
        />
    );
}

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

function Example() {
    const tab = signal("home");
    return (
        <BottomNav
            label="Primary"
            items={[
                { id: "home", label: "Home", icon: "home" },
                { id: "search", label: "Search", icon: "search" },
                { id: "inbox", label: "Inbox", icon: "bell" },
            ]}
            value={tab()}
            onChange={tab.set}
        />
    );
}

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

function Example() {
    const opened = signal(false);
    return (
        <Group gap="0.75rem">
            <Burger
                opened={opened()}
                label={opened() ? "Close navigation" : "Open navigation"}
                onClick={() => opened.set(!opened())}
            />
            <Text muted>Navigation is {opened() ? "open" : "closed"}</Text>
        </Group>
    );
}

function Example() {
    const current = signal("install");
    const sections = [
        { id: "install", label: "Installation" },
        { id: "usage", label: "Usage" },
        { id: "theming", label: "Theming" },
    ];
    return (
        <TableOfContents
            title="On this page"
            items={sections.map((s) => ({
                ...s,
                active: current() === s.id,
                onSelect: () => current.set(s.id),
            }))}
        />
    );
}

function Example() {
    const sections = [
        { id: "spy-intro", label: "Introduction", text: "What Arachne UI is and when to use it." },
        {
            id: "spy-install",
            label: "Installation",
            text: "Add the package and import the stylesheet.",
        },
        { id: "spy-usage", label: "Usage", text: "Render components and wire their state." },
    ];
    return (
        <Group align="start" gap="1.5rem">
            <ScrollSpy label="Article sections" offset={8} items={sections} />
            <ScrollArea maxHeight="9rem" aria-label="Article">
                <For each={sections}>
                    {(section) => (
                        <section id={section.id} style={{ "min-height": "7rem" }}>
                            <strong>{section.label}</strong>
                            <Text muted>{section.text}</Text>
                        </section>
                    )}
                </For>
            </ScrollArea>
        </Group>
    );
}

function Example() {
    let link: HTMLAnchorElement | undefined;
    return (
        <Box style={{ position: "relative", "padding-top": "3rem" }}>
            <SkipLink
                href="#main"
                ref={(el: HTMLElement) => {
                    link = el as HTMLAnchorElement;
                }}
            >
                Skip to content
            </SkipLink>
            <Group gap="0.75rem">
                <Button size="sm" variant="outline" onClick={() => link?.focus()}>
                    Reveal the skip link
                </Button>
                <Text muted>It appears only while focused — keyboard users meet it first on Tab.</Text>
            </Group>
        </Box>
    );
}

<ToTop offset={-1} />