Component | Navigation

Render a navigation pane that links to other apps. Useful for creating multi-page apps.

Introduced in SDK v0.26.0

TypeScript / JavaScript

import { Compose } from "@composehq/sdk";

// Create a navigation pane.
const nav = new Compose.Navigation(
    // list of app routes to include in the navigation pane
    ["home-page", "settings"],
    {
        // optional: a URL to a logo image to display in the navigation pane. 
        logoUrl: "https://composehq.com/dark-logo-with-text.svg",
    }
);

const homePage = new Compose.App({
    route: "home-page",
    handler: () => page.add(() => ui.header("Home Page"));
    navigation: nav, // show nav pane on home page
});

const settings = new Compose.App({
    route: "settings",
    handler: () => page.add(() => ui.header("Settings Page"));
    navigation: nav, // show nav pane on settings page
});

Python

import compose_sdk as c

# Create a navigation pane.
nav = c.Navigation(
    # list of app routes to include in the navigation pane
    ["home-page", "settings"],
    # optional: a URL to a logo image to display in the navigation pane. 
    logo_url="https://composehq.com/dark-logo-with-text.svg",
)

home_page = c.App(
    route="home-page",
    handler=lambda page, ui: page.add(ui.header("Home Page")),
    navigation=nav, # show nav pane on home page
)

settings = c.App(
    route="settings",
    handler=lambda page, ui: page.add(ui.header("Settings Page")),
    navigation=nav, # show nav pane on settings page
)

API reference

Function signature

TypeScript / JavaScript

class Navigation {
    constructor(items: string[], properties?: { logoUrl?: string }): void;
}

Python

class Navigation:
    def __init__(
        self,
        items: List[str],
        *,
        logo_url: Optional[str] = None
    ) -> None:
        ...

Parameters

TypeScript / JavaScript

items

required string[]

A list of app routes to include in the navigation pane.

Python

items

required list[str]

A list of app routes to include in the navigation pane.

---

TypeScript / JavaScript

properties.logoUrl

optional string

The URL for a logo wordmark image to display in the navigation pane. The easiest way to provide a logo is to go to your product's website, right click on your logo, and select 'Copy image address'. Then paste that URL here.

Python

logo_url

optional str

The URL for a logo wordmark image to display in the navigation pane. The easiest way to provide a logo is to go to your product's website, right click on your logo, and select 'Copy image address'. Then paste that URL here.

---