A widget presenting sidebar and content side by side or as a navigation view.
<picture> <source srcset="navigation-split-view-dark.png" media="(prefers-color-scheme: dark)"> <img
src="navigation-split-view.png" alt="navigation-split-view"> </picture> <picture> <source
srcset="navigation-split-view-collapsed-dark.png" media="(prefers-color-scheme: dark)"> <img
src="navigation-split-view-collapsed.png" alt="navigation-split-view-collapsed"> </picture>
`AdapNavigationSplitView` has two [class@NavigationPage] children: sidebar and content, and displays them side by side.
When [property@NavigationSplitView:collapsed] is set to `TRUE`, it instead puts both children inside an [class@NavigationView]. The [
property@NavigationSplitView:show-content] controls which child is visible while collapsed.
See also [class@OverlaySplitView].
`AdapNavigationSplitView` is typically used together with an [class@Breakpoint] setting the `collapsed` property to `TRUE` on small
widths, as follows:
```xml <object class="AdapWindow"> <property name="width-request">280</property> <property name="height-request"
>200</property> <property name="default-width">800</property> <property name="default-height">800<
/property> <child> <object class="AdapBreakpoint"> <condition>max-width: 400sp</condition> <setter
object="split_view" property="collapsed">True</setter> </object> </child> <property name="content"> <
object class="AdapNavigationSplitView" id="split_view"> <property name="sidebar"> <object class="AdapNavigationPage">
<property name="title" translatable="yes">Sidebar</property> <property name="child"> <!-- ... --> </property
> </object> </property> <property name="content"> <object class="AdapNavigationPage"> <property
name="title" translatable="yes">Content</property> <property name="child"> <!-- ... --> </property> <
/object> </property> </object> </property> </object> ```
Sizing
When not collapsed, `AdapNavigationSplitView` changes the sidebar width depending on its own width.
If possible, it tries to allocate a fraction of the total width, controlled with the [property@NavigationSplitView:sidebar-width-fraction
] property.
The sidebar also has minimum and maximum sizes, controlled with the [property@NavigationSplitView:min-sidebar-width] and [
property@NavigationSplitView:max-sidebar-width] properties.
The minimum and maximum sizes are using the length unit specified with the [property@NavigationSplitView:sidebar-width-unit].
By default, sidebar is using 25% of the total width, with 180sp as the minimum size and 280sp as the maximum size.
Header Bar Integration
When used inside `AdapNavigationSplitView`, [class@HeaderBar] will automatically hide the window buttons in the middle.
When collapsed, it also displays a back button for the content widget, as well as the page titles. See [class@NavigationView]
documentation for details.
Actions
`AdapNavigationSplitView` defines the same actions as `AdapNavigationView`, but they can be used even when the split view is not
collapsed:
- `navigation.push` takes a string parameter specifying the tag of the page to push. If it matches the tag of the content widget, it
sets [property@NavigationSplitView:show-content] to `TRUE`.
- `navigation.pop` doesn't take any parameters and sets [property@NavigationSplitView:show-content] to `FALSE`.
`AdapNavigationSplitView` as `GtkBuildable`
The `AdapNavigationSplitView` implementation of the [iface@Gtk.Buildable] interface supports setting the sidebar widget by specifying
“sidebar” as the “type” attribute of a `<child>` element, Specifying “content” child type or omitting it results in
setting the content widget.
CSS nodes
`AdapNavigationSplitView` has a single CSS node with the name `navigation-split-view`.
When collapsed, it contains a child node with the name `navigation-view` containing both children.
``` navigation-split-view ╰── navigation-view ├── [sidebar child] ╰── [content child] ```
When not collapsed, it contains two nodes with the name `widget`, one with the `.sidebar-pane` style class, the other one with
`.content-view` style class, containing the sidebar and content children respectively.
``` navigation-split-view ├── widget.sidebar-pane │ ╰── [sidebar child] ╰── widget.content-pane ╰── [content
child] ```
Accessibility
`AdapNavigationSplitView` uses the `GTK_ACCESSIBLE_ROLE_GROUP` role.
