Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A NavigationBar models the top navigation bar of an iOS app. The bar has a title, an optional subtitle, and two tappable areas on its left and right sides. Each of these areas may have a link, icon or both. The bar has a taller “large” mode that sits the title below the bar.

PropTypeNotes
titlestringWhether the Radio is checked.
subtitlestring
showLeftboolean
leftLinkstring
leftIconstringSee Icon below.
onLeftTapfunction
showRightboolean
rightLinkstring
rightIconstringSee Icon below.
onRightTapfunction
largeboolean

leftIcon and rightIcon

The icon prop can accept either “none” (for no icon) or one of the Material Design Icon names from the list of Icon Names.

showLeft and showRight

These properties will show whether or not to display the links' content. For example, when leftLink is false, the left will be hidden. This provides an alternative to clearing the values of leftIcon, onLeftTap, and leftLink.

// Override

import { Override } from "framer"

export function NavigationBarExample(): Override {
	return {
    leftLink: "Back",
    leftIcon: "chevron_left",
    onLeftTap: () => { appState.page = 0 }
    showLeft: appState.page > 0
	}
}

Examples

// Override

import { Override } from "framer"

export function NavigationBarExample(): Override {
	return {
		title: "Home",
    leftLink: "Back",
    leftIcon: "chevron_left",
    onLeftTap: () => console.log("Tapped left!")
    rightLink: null,
    rightIcon: "edit",
    onRightTap: () => console.log("Tapped right!")
  	large: false
	}
}
// Code Component

import * as React from 'react'
import { Frame } from 'framer'
// @ts-ignore
import { NavigationBar } from '@framer/steveruizok.education/code'

export const RadioExample = (props) => {
	return (
		<Frame size="100%" background="none">
			<NavigationBar
				title="Home"
				leftLink="Back"
				leftIcon="chevron_left"
				onLeftTap={() => console.log('Tapped left!')}
				rightLink={null}
				rightIcon="edit"
				onRightTap={() => console.log('Tapped right!')}
				large={false}
			/>
		</Frame>
	)
}