import {ClassMembers, ClassSummary, CodeExample, Image} from '@site/src/components/crocodocs';

NavigationRail

<ClassSummary name={frontMatter.class_name} image={frontMatter.example_images + '/image_for_docs.png'} imageCaption="Navigation rail extended" imageWidth="12%"/>

Examples

Live example

Basic Example

<CodeExample path={frontMatter.examples + '/basic/main.py'} language="python" />

<Image src={frontMatter.example_images + '/basic.png'} alt="basic" width="45%" />

Adaptive navigation

This example switches between a NavigationBar on narrow layouts and a NavigationRail with an end NavigationDrawer on wider layouts.

<CodeExample path={'controls/material/navigation_drawer/adaptive_navigation/main.py'} language="python" />

<Image src={'test-images/examples/controls/material/golden/macos/navigation_drawer/adaptive_navigation.gif'} alt="Adaptive navigation example switching between a navigation bar and a navigation rail with an end drawer" width="55%" />

<ClassMembers name={frontMatter.class_name} />