Photonix UI - React Components, Templates & Figma Design System

TopNavigation

Main application header with navigation and user actions.

Preview

Usage

"use client";

import { Button, Flex, IconButton, SearchField, TopNavigation } from '@photonix/ultimate';
import { BellOutline, SettingsOutline } from '@photonix/icons';

export default function TopNavigationBasicExample() {
    return (
        <TopNavigation
            behavior="static"
            showDivider
            centerContent={<SearchField placeholder="Search workspace" variant="rounded" />}
            rightContent={(
                <Flex gap="xs" align="center">
                    <Flex gap="none" align="center">
                        <IconButton variant="tertiary" size="large" icon={<BellOutline />} aria-label="Notifications" badge="3" />
                        <IconButton variant="tertiary" size="large" icon={<SettingsOutline />} aria-label="Settings" />
                    </Flex>
                    <Button variant="primary" size="medium">Upgrade</Button>
                </Flex>
            )}
        />
    );
}

Component API

TopNavigation

Prop	Type	Default	Description
logo	`React.ReactNode`	`-`	Custom logo element. Defaults to Photonix Logo with height 48px.
centerContent	`React.ReactNode`	`-`	Content for the center section (Search, Tabs, etc.).
rightContent	`React.ReactNode`	`-`	Content for the right section (Actions, Profile, etc.).
hideLeftSection	`boolean`	`false`	Hide the left section (logo area). Useful when used without sidebar.
showDivider	`boolean`	`true`	Show bottom divider border.
hugLogo	`boolean`	`false`	If true, the left section (logo) width will fit its content instead of fixed 248px.
behavior	`"static" \| "sticky" \| "hide-on-scroll"`	`'static'`	Navigation behavior on scroll.
transparent	`boolean`	`false`	If true, the background will be transparent.
forceBackground	`boolean`	`false`	Force background to appear even when transparent mode is active (e.g., when MegaMenu is open).
className	`string`	`-`	Additional class name.
style	`React.CSSProperties`	`-`	Custom styles.

Variants

With Search

Standard pattern for applications with a central search bar.

With Search

"use client";

import { AppsOutline, BellOutline } from '@photonix/icons';
import { Avatar, Box, Flex, IconButton, SearchField, TopNavigation, AVATAR_IMAGES } from '@photonix/ultimate';

export default function TopNavigationVariantSearchExample() {
    return (
        <>
            <TopNavigation
                centerContent={<SearchField placeholder="Search" variant="rounded" />}
                rightContent={(
                    <Flex gap="xs" align="center">
                        <Flex gap="none" align="center">
                            <IconButton icon={<AppsOutline />} variant="tertiary" size="large" aria-label="Apps" />
                            <IconButton icon={<BellOutline />} variant="tertiary" size="large" aria-label="Notifications" badge="12" />
                        </Flex>
                        <Avatar src={AVATAR_IMAGES[1]} size="40" />
                    </Flex>
                )}
            />
            <Box p="xl" minH={120} bg="tertiary" />
        </>
    );
}

With Tabs

Navigation tabs positioned in the center for primary app sections.

With Tabs

"use client";

import { SearchOutline } from '@photonix/icons';
import { Box, IconButton, Tabs, TopNavigation } from '@photonix/ultimate';

export default function TopNavigationVariantTabsExample() {
    return (
        <Box w="100%">
            <TopNavigation
                centerContent={
                    <Box w={400}>
                        <Tabs
                            tabs={[
                                { id: '1', label: 'All Projects' },
                                { id: '2', label: 'My Projects' },
                                { id: '3', label: 'Shared' },
                            ]}
                            activeTab="1"
                            onChange={() => {}}
                        />
                    </Box>
                }
                rightContent={<IconButton icon={<SearchOutline />} variant="tertiary" size="large" aria-label="Search" />}
            />
            <Box p="xl" minH={120} bg="tertiary" />
        </Box>
    );
}

Custom Logo

Customize the logo element and control the frame behavior.

Custom Logo

"use client";

import { Box, Heading, Text, TopNavigation } from '@photonix/ultimate';

export default function TopNavigationVariantLogoExample() {
    return (
        <Box w="100%">
            <TopNavigation
                logo={<Heading size="headline-sm" style={{ whiteSpace: 'nowrap' }}>PHOTONIX APP</Heading>}
                hugLogo
                centerContent={<Text color="secondary">Custom logo section</Text>}
            />
            <Box p="xl" minH={120} bg="tertiary" />
        </Box>
    );
}

Workspace Switcher

Replace the default logo with an organization switcher item.

Workspace Switcher

"use client";

import { AppsOutline, MoreVerticalOutline } from '@photonix/icons';
import { Avatar, Box, Flex, IconButton, SearchField, TopNavigation, WorkspaceSwitcher, AVATAR_IMAGES } from '@photonix/ultimate';

export default function TopNavigationVariantWorkspaceExample() {
    return (
        <Box w="100%">
            <TopNavigation
                logo={<WorkspaceSwitcher name="hoangthuanthv's Org" plan="FREE" />}
                hugLogo
                centerContent={<SearchField placeholder="Search" variant="rounded" />}
                rightContent={(
                    <Flex gap="xs" align="center">
                        <Flex gap="none" align="center">
                            <IconButton icon={<AppsOutline />} variant="tertiary" size="large" aria-label="Apps" />
                            <IconButton icon={<MoreVerticalOutline />} variant="tertiary" size="large" aria-label="More" />
                        </Flex>
                        <Avatar src={AVATAR_IMAGES[2]} size="40" />
                    </Flex>
                )}
            />
            <Box p="xl" minH={120} bg="tertiary" />
        </Box>
    );
}

Sticky

The navigation sticks to the top of the page while scrolling.

Scrollable ContentScroll down inside this area to see the TopNavigation stay pinned.

Sticky

"use client";

import { Box, Button, SlotPlaceholder, Text, TopNavigation } from '@photonix/ultimate';

export default function TopNavigationVariantStickyExample() {
    return (
        <Box h={240} overflowY="auto" position="relative" w="100%">
            <TopNavigation
                behavior="sticky"
                logo={<Text weight="bold">STICKY</Text>}
                centerContent={<Text color="secondary">Sticks to top on scroll</Text>}
                rightContent={<Button size="small">Action</Button>}
            />
            <Box p="xl" bg="tertiary" w="100%">
                <SlotPlaceholder
                    title="Scrollable Content"
                    description="Scroll down inside this area to see the TopNavigation stay pinned."
                    minHeight={400}
                />
            </Box>
        </Box>
    );
}

No Divider

Remove the bottom border for a cleaner appearance.

Seamless continuation below the navigation

This variant removes the separating line so the navigation and content feel like one continuous surface.

No Divider

"use client";

import { BellOutline, SettingsOutline } from '@photonix/icons';
import { Box, Button, Flex, IconButton, SearchField, Text, TopNavigation } from '@photonix/ultimate';

export default function TopNavigationVariantNoDividerExample() {
    return (
        <Box w="100%" bg="tertiary">
            <TopNavigation
                logo={<Text weight="bold">NO DIVIDER</Text>}
                centerContent={<SearchField placeholder="Search workspace" variant="rounded" />}
                showDivider={false}
                rightContent={(
                    <Flex gap="xs" align="center">
                        <Flex gap="none" align="center">
                            <IconButton variant="tertiary" icon={<BellOutline />} aria-label="Notifications" badge="3" />
                            <IconButton variant="tertiary" icon={<SettingsOutline />} aria-label="Settings" />
                        </Flex>
                        <Button variant="primary" size="small">Invite</Button>
                    </Flex>
                )}
            />
            <Box p="xl" minH={148}>
                <Text variant="title-md" color="primary" style={{ marginBottom: 'var(--space-4xs)' }}>
                    Seamless continuation below the navigation
                </Text>
                <Text variant="body-md" color="secondary" style={{ maxWidth: '520px' }}>
                    This variant removes the separating line so the navigation and content feel like one continuous surface.
                </Text>
            </Box>
        </Box>
    );
}

Transparent

Transparent background mode for hero sections.

Hero navigation on top of branded imagery.

Use transparent mode when the navigation should sit on top of a visual header without adding a solid bar.

Transparent

"use client";

import { Box, Button, Flex, Text, TopNavigation } from '@photonix/ultimate';

export default function TopNavigationVariantTransparentExample() {
    return (
        <Box
            w="100%"
            style={{
                background: 'linear-gradient(135deg, var(--surface-brand-primary), var(--surface-accent-indigo))',
                minHeight: '280px',
            }}
        >
            <TopNavigation
                logo={<Text weight="bold" style={{ color: 'var(--foreground-neutral-on-dark-fixed)' }}>TRANSPARENT</Text>}
                centerContent={(
                    <Flex gap="lg" align="center">
                        <Text as="span" weight="medium" style={{ color: 'rgba(255, 255, 255, 0.92)' }}>Product</Text>
                        <Text as="span" weight="medium" style={{ color: 'rgba(255, 255, 255, 0.72)' }}>Solutions</Text>
                        <Text as="span" weight="medium" style={{ color: 'rgba(255, 255, 255, 0.72)' }}>Pricing</Text>
                    </Flex>
                )}
                transparent
                showDivider={false}
                rightContent={(
                    <Flex gap="xs" align="center">
                        <Button
                            variant="tertiary"
                            size="small"
                            style={{ color: 'var(--foreground-neutral-on-dark-fixed)' }}
                        >
                            Contact
                        </Button>
                        <Button
                            variant="secondary"
                            size="small"
                            style={{
                                backgroundColor: 'rgba(255, 255, 255, 0.12)',
                                borderColor: 'rgba(255, 255, 255, 0.24)',
                                color: 'var(--foreground-neutral-on-dark-fixed)',
                            }}
                        >
                            Action
                        </Button>
                    </Flex>
                )}
            />
            <Box p="2xl">
                <Text
                    as="p"
                    variant="headline-md"
                    style={{
                        color: 'var(--foreground-neutral-on-dark-fixed)',
                        marginBottom: 'var(--space-xs)',
                        maxWidth: '420px',
                    }}
                >
                    Hero navigation on top of branded imagery.
                </Text>
                <Text
                    as="p"
                    variant="body-md"
                    style={{
                        color: 'rgba(255, 255, 255, 0.8)',
                        maxWidth: '520px',
                    }}
                >
                    Use transparent mode when the navigation should sit on top of a visual header without adding a solid bar.
                </Text>
            </Box>
        </Box>
    );
}

TopNavigation

Preview

Component API

TopNavigation

Variants

With Search

With Tabs

Custom Logo

Workspace Switcher

Sticky

No Divider

Transparent

On this page