Layout

Layout components define a page’s structure and the areas for navigation and content.

Examples Custom theming Code Usage Changelog

Top navigation supports custom theming through the customTheme prop.

Enable custom theming by providing both:

backgroundColor which determines the background color of the top bar
highlightColor which determines the background color of the create button (from top nav items)

Both of these colors should be provided as RGB objects, which can be derived using our color string parsing utilities.

White or black text is automatically chosen to maximize contrast.

import React from 'react';

import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';

import { MockRoot } from '../../utils/mock-root';
import { MockContent } from '../common/mock-content';

export const CustomThemingRgbObjectExample = (): React.JSX.Element => (
	<MockRoot>
		<TopNav
			customTheme={{
				backgroundColor: { r: 248, g: 238, b: 254 },
				highlightColor: { r: 150, g: 74, b: 192 },
			}}
		>
			<MockContent />
		</TopNav>
	</MockRoot>
);

export default CustomThemingRgbObjectExample;

Color string parsing

Custom theme colors should be provided as RGB objects, but are typically obtained from users as strings.

We provide a number of utilities for parsing color strings into an RGB object format. These parsing utilities are completely optional, and you are able to create your own.

parseHex

Use parseHex to parse a CSS hex color string into an RGB object. It will return null on failure.

If an alpha channel is present it will be ignored.

Confluence

import React from 'react';

import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';
import { parseHex } from '@atlaskit/navigation-system/theming/color-utils/parse-hex';

import { MockRoot } from '../../utils/mock-root';
import { MockContent } from '../common/mock-content';

export const CustomThemingParseHexExample = (): React.JSX.Element => (
	<MockRoot>
		<TopNav
			customTheme={{ backgroundColor: parseHex('#F8EEFE'), highlightColor: parseHex('#964AC0') }}
		>
			<MockContent />
		</TopNav>
	</MockRoot>
);

export default CustomThemingParseHexExample;

parseRgb

Use parseRgb to parse a CSS rgb color string into an RGB object. It will return null on failure.

The fractional parts of non-integer values will be ignored, and only the legacy comma-separated syntax is supported.

Confluence

import React from 'react';

import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';
import { parseRgb } from '@atlaskit/navigation-system/theming/color-utils/parse-rgb';

import { MockRoot } from '../../utils/mock-root';
import { MockContent } from '../common/mock-content';

export const CustomThemingParseRgbExample = (): React.JSX.Element => (
	<MockRoot>
		<TopNav
			customTheme={{
				backgroundColor: parseRgb('rgb(248, 238, 254)'),
				highlightColor: parseRgb('rgb(150, 74, 192)'),
			}}
		>
			<MockContent />
		</TopNav>
	</MockRoot>
);

export default CustomThemingParseRgbExample;

parseHsl

Use parseHsl to parse a CSS hsl color string into an RGB object. It will return null on failure.

The fractional parts of non-integer values will be ignored, and only the legacy comma-separated syntax is supported.

Confluence

import React from 'react';

import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';
import { parseHsl } from '@atlaskit/navigation-system/theming/color-utils/parse-hsl';

import { MockRoot } from '../../utils/mock-root';
import { MockContent } from '../common/mock-content';

export const CustomThemingParseHslExample = (): React.JSX.Element => (
	<MockRoot>
		<TopNav
			customTheme={{
				backgroundColor: parseHsl('hsl(278, 89%, 97%)'),
				highlightColor: parseHsl('hsl(279, 48%, 52%)'),
			}}
		>
			<MockContent />
		</TopNav>
	</MockRoot>
);

export default CustomThemingParseHslExample;

parseUserColor

Use parseUserColor to parse a CSS color string without knowing the format used. It will return null on failure.

Supported CSS color string formats are:

hex colors
rgb() color functions
hsl() color functions

Confluence

import React from 'react';

import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';
import { parseUserColor } from '@atlaskit/navigation-system/theming/color-utils/parse-user-color';

import { MockRoot } from '../../utils/mock-root';
import { MockContent } from '../common/mock-content';

export const CustomThemingParseUserColorExample = (): React.JSX.Element => (
	<MockRoot>
		<TopNav
			customTheme={{
				backgroundColor: parseUserColor('#F8EEFE'),
				highlightColor: parseUserColor('rgb(150, 74, 192)'),
			}}
		>
			<MockContent />
		</TopNav>
	</MockRoot>
);

export default CustomThemingParseUserColorExample;

Was this page helpful?

We use this feedback to improve our documentation.