Use-cases Navigation Path
By default, use-cases have a navigation path in Widgetbook that is based on where their component file is located. There are multiple ways to customize the navigation path either globally or locally.
The component name (e.g. Button) and the use-case name (e.g. Primary) are
concatenated at the end of the path.
[ Nav Path ] / [ Component Name ] / [ Use-case Name ]
Using nav_path_mode option
You can globally change the behavior of the navigation path generation for all use-cases by providing a nav_path_mode option in build.yaml as follows:
| Option Value | Navigation Path Based on |
|---|---|
component (default) | The component (i.e. Widget) file. |
use-case | The use-case file (i.e. where the @UseCase annotation is used) |
build.yaml
targets:
$default:
builders:
widgetbook_generator:use_case_builder:
options:
nav_path_mode: use-case
Using @UseCase.path parameter
To provide a custom navigation path for a single use-case, you can use the path parameter in the @UseCase annotation.
import 'package:your_app/widgets/button.dart';
// Navigation path: `widgets/Button/Primary`
@widgetbook.UseCase(
name: 'Primary',
type: Button
)
Widget buildPrimaryButton() {
return Button();
}
If you wrap a folder name in square brackets, it will be treated as a category in the navigation path.
import 'package:your_app/components/button.dart';
// Navigation path: `[Interactions]/buttons/Button/Primary`
@widgetbook.UseCase(
name: 'Primary',
type: Button,
path: '[Interactions]/buttons',
)
Widget buildPrimaryButton() {
return Button();
}