Photonix UI - React Components, Templates & Figma Design System

TopNavigation

Main application header with navigation and user actions.

Preview

Page ContentThis area represents the main page content layout.

Usage

import { TopNavigation } from '@photonix/ultimate';

<TopNavigation
  logo={<Logo height={48} />}
  centerContent={<SearchField />}
  rightContent={<UserMenu />}
/>

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

<TopNavigation
  centerContent={<SearchField />}
  rightContent={
    <Flex gap="xs" align="center">
      <IconButton icon={<Apps />} variant="tertiary" />
      <IconButton icon={<Notification />} variant="tertiary" badge="12" />
      <Avatar src="..." size="40" />
    </Flex>
  }
/>

With Tabs

Navigation tabs positioned in the center, typically used for primary app sections.

With Tabs

<TopNavigation
  centerContent={
    <Box w={600}>
      <Tabs tabs={[...] } activeTab="tab1" />
    </Box>
  }
/>

Custom Logo & Framing

Customize the logo element and control the frame behavior.

Custom Logo & Framing

<TopNavigation 
  logo={<Heading size="headline-sm">PHOTONIX</Heading>} 
  hugLogo 
/>

Workspace Switcher

Replace the default logo with an organization switcher item at the start of the top navigation.

Workspace Switcher

<TopNavigation
  logo={<WorkspaceSwitcher />}
  hugLogo
  centerContent={
    <SearchField placeholder="Search" variant="rounded" style={{ inlineSize: '100%' }} />
  }
  rightContent={<Avatar src="..." size="40" />}
/>

Sticky

The navigation sticks to the top of the page when scrolling down.

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

Sticky

<TopNavigation behavior="sticky" />

No Divider

Remove the bottom border for a cleaner appearance.

No Divider

<TopNavigation showDivider={false} />

Transparent

Transparent background mode, useful for hero sections or landing pages.

Transparent

<TopNavigation transparent showDivider={false} />

TopNavigation

Preview

Component API

TopNavigation

Variants

With Search

With Tabs

Custom Logo & Framing

PHOTONIX APP

Workspace Switcher

Sticky

No Divider

Transparent

On this page