Mobile Nav Top

Top navigation bars for mobile interfaces, typically containing branding, page titles, and essential navigation or action controls.

This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Tokens

Standardized design system values that define consistent visual properties across mobile navigation top components. These tokens ensure visual coherence while enabling flexible theme customization and brand adaptation.

Theming Tokens

Design tokens organized by category with color-coded labels indicating their scope and impact level. Each token includes detailed specifications with values, usage guidelines, and customization options.

Legend:

Granular tokens that affect only this component.
Granular tokens that affect mobile-nav components.
Semantic tokens that affect the whole application.
Base tokens that affect the whole application.

Color

Component Token	Base Token
color.context.default.fg-main	{color.base.context.light.default.fg-main}
color.context.default.fg-subtle	{color.base.context.light.default.fg-subtle}
color.context.default.fg-slight	{color.base.context.light.default.fg-slight}
color.context.default.icon-main	{color.base.context.light.default.icon-main}
color.context.default.icon-slight	{color.base.context.light.default.icon-slight}
color.context.default.bg-main	{color.base.context.light.default.bg-main}
color.context.default.bg-even	{color.base.context.light.default.bg-even}
color.context.default.bg-evident	{color.base.context.light.default.bg-evident}
color.context.default.dim-slight	{color.base.context.light.default.dim-slight}
color.context.default.border-subtle	{color.base.context.light.default.border-subtle}

Sizing

Component Token	Base Token
size.icon.glyph.large	{size.unit.28}
size.unit.28	{dimension.base.28}
size.unit.44	{dimension.base.44}
size.asset.separator	{size.unit.1}
size.asset.indicator	{size.unit.4}

Typography

Component Token	Value
font.text.medium.normal	{fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.normal}, lineHeight: {typography.lineHeight.text.medium}, fontSize: {typography.fontSize.text.medium}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}}
font.text.medium.strong	{fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.strong}, lineHeight: {typography.lineHeight.text.medium}, fontSize: {typography.fontSize.text.medium}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}}
font.text.2xlarge.strong	{fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.strong}, lineHeight: {typography.lineHeight.text.2xlarge}, fontSize: {typography.fontSize.text.2xlarge}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}}
font.text.xsmall.normal	{fontFamily: {typography.fontFamily.text}, fontWeight: {typography.fontWeight.text.normal}, lineHeight: {typography.lineHeight.text.xsmall}, fontSize: {typography.fontSize.text.xsmall}, letterSpacing: {typography.letterSpacing.base.zero}, paragraphSpacing: {typography.paragraphSpacing.base.zero}, textCase: {typography.textCase.base.none}, textDecoration: {typography.textDecoration.base.none}}

Spacing

Component Token	Base Token
space.context.medium	{size.unit.16}
space.context.small	{size.unit.12}
space.context.xsmall	{size.unit.8}
space.context.2xsmall	{size.unit.4}
space.context.3xsmall	{size.unit.2}
space.unit.10	{dimension.base.10}

Border Width

Component Token	Base Token
borderWidth.asset.separator	{size.asset.separator}
borderWidth.asset.indicator	{size.asset.indicator}

Border Radius

Component Token	Base Token
borderRadius.context.round-44	{size.unit.22}
borderRadius.context.round-36	{size.unit.18}
borderRadius.context.round-32	{size.unit.16}