Global

EXPERIMENTAL

The Global component provides a dedicated navigation experience for full-page Forge apps. It delivers a complete layout with sidebar navigation, header, and main content areas that align with the native Atlassian product experience.

Get started

Component structure

The Global component encompasses three primary areas that work together to create a complete full-page experience:

1. Header — Automatically rendered with app branding, search, settings, and notifications
2. Sidebar — Left navigation panel with link and expandable menu items
3. Main content — Central area for your app's primary content

To add the Global component to your app:

1
2
import { Global } from '@forge/react';

Component hierarchy

1
2
<Global>
├─ <Global.Sidebar>
│  ├─ <Global.LinkMenuItem />
│  └─ <Global.ExpandMenuItem>
│     └─ <Global.LinkMenuItem />
└─ <Global.Main>
   └─ {Your app content}

The two fragments must be used together, and there is an additional header that is rendered. The full page layout with all areas rendered has the structure depicted below.

Props

Global

Layout areas

Header

The header is rendered automatically with no configuration required. It provides a consistent navigation experience across your global app.

Header elements:

• App name and logo — Displays your app's title and icon from the manifest. Clicking navigates to the root route (/)
• Search — Global search bar for indexing content from Atlassian products. If the app is installed on Confluence, Search will index content in Confluence. If the app is installed on Jira, Search will index content in Jira.
• Settings — Settings dropdown where site admins can access the manage apps console. Only accessible by app admins.
• Notifications — Notification center for viewing Atlassian product notifications

Manifest properties

The following manifest properties are used for the app logo and navigation:

Global.Sidebar

The sidebar renders on the left side of the screen and provides navigation for your app.

Sidebar menu items:

Sidebar items must be defined as nested components. There are two available types of menu item components:

Global.LinkMenuItem

A clickable navigation link in the sidebar.

Global.ExpandMenuItem

An expandable menu item that reveals nested links when clicked.

Global.Main

This component wraps your app's main content area.

Requirements and limitations

Component requirements

• Only <Global.Main> and <Global.Sidebar> should be direct children of <Global>
• Both <Global.Sidebar> and <Global.Main> are required
• This component is only available in full page modules (confluence:fullPage and jira:fullPage)

Sidebar menu structure

Allowed:

• <Global.Sidebar> can only have <Global.LinkMenuItem> and <Global.ExpandMenuItem> as its children
• Sidebar can contain any number of LinkMenuItem components
• ExpandMenuItem can only contain LinkMenuItem components

Not allowed:

• LinkMenuItem cannot have children
• ExpandMenuItem cannot be nested within another ExpandMenuItem (cannot nest <Global.ExpandMenuItem> inside <Global.ExpandMenuItem>)
• <Global.ExpandMenuItem> can only have <Global.LinkMenuItem> as its children

Examples

1
2
import { Global } from '@forge/react';
import ForgeReconciler, { Text } from '@forge/react';

export const App = () => {
  return (
    <Global>
      <Global.Sidebar forYouUrl="for-you">
        <Global.LinkMenuItem label="Home" href="" />
        <Global.LinkMenuItem label="Dashboard" href="dashboard" />
        <Global.ExpandMenuItem label="Settings">
          <Global.LinkMenuItem label="Profile" href="settings/profile" />
          <Global.LinkMenuItem label="Preferences" href="settings/preferences" />
        </Global.ExpandMenuItem>
      </Global.Sidebar>
      <Global.Main>
        <Text>Your app content here</Text>
      </Global.Main>
    </Global>
  );
};

export default ForgeReconciler.render(<App />);

Related resources