NavigationRail

Navigation

NavigationRail

Side navigation rail for medium screens that bridges Drawer and Bottom navigation.

Usage

Expose key destinations on tablets and desktop while conserving width.

Highlights

• Rail items with active indicators
• Supports badges and icons

When to use it

• Layout shifts from Drawer (mobile) to Rail (tablet).
• You need a persistent column of navigation with optional FAB slot.

Related components

DrawerAppbarNavigationStack

Examples

Default

Preview (Web)

import { useState } from 'react';
import { StyleSheet } from 'react-native';
import { FAB } from 'react-native-molecules/components/FAB';
import { IconButton } from 'react-native-molecules/components/IconButton';
import { NavigationRail } from 'react-native-molecules/components/NavigationRail';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  container: {
      height: 480,
  },
  header: {
      paddingVertical: 16,
      gap: 12,
  },
});

const routes = [
  {
      id: 'all',
      iconName: 'folder-outline',
      activeIconName: 'folder',
      label: 'All files',
  },
  {
      id: 'recent',
      iconName: 'clock-time-four-outline',
      activeIconName: 'clock-time-four',
      label: 'Recent',
  },
  {
      id: 'shared',
      iconName: 'account-multiple-outline',
      activeIconName: 'account-multiple',
      label: 'Shared',
  },
];

export default function Example() {
  const [active, setActive] = useState(routes[0].id);

  return (
      <NavigationRail style={styles.container}>
          <NavigationRail.Header style={styles.header}>
              <IconButton name="menu" size={24} onPress={() => console.log('Menu')} />
              <FAB iconName="pencil-outline" onPress={() => console.log('Compose')} elevation={0} />
          </NavigationRail.Header>

          <NavigationRail.Content>
              {routes.map(route => (
                  <NavigationRail.Item
                      key={route.id}
                      {...route}
                      active={active === route.id}
                      onPress={() => setActive(route.id)}
                  />
              ))}
          </NavigationRail.Content>

          <NavigationRail.Footer>
              <Text>Footer</Text>
          </NavigationRail.Footer>
      </NavigationRail>
  );
}

Prop	Type	Default	Description
childrenRequired	ReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>[]	—	—

Defined in react-native-molecules/components/NavigationRail