NavigationSplitView
Object Hierarchy:
Description:
[ Version ( since = "1.4" ) ]
public sealed class NavigationSplitView : Widget, Accessible, Buildable, ConstraintTarget
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>
`AdwNavigationSplitView` 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].
`AdwNavigationSplitView` is typically used together with an [class@Breakpoint] setting the `collapsed` property to `TRUE` on small widths, as follows:
```xml <object class="AdwWindow"> <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="AdwBreakpoint"> <condition>max-width: 400sp</condition> <setter object="split_view" property="collapsed">True</setter> </object> </child> <property name="content"> <object class="AdwNavigationSplitView" id="split_view"> <property name="sidebar"> <object class="AdwNavigationPage"> <property name="title" translatable="yes">Sidebar</property> <property name="child"> <!-- ... --> </property> </object > </property> <property name="content"> <object class="AdwNavigationPage"> <property name="title" translatable="yes" >Content</property> <property name="child"> <!-- ... --> </property> </object> </property> < /object> </property> </object> ```
Sizing
When not collapsed, `AdwNavigationSplitView` 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 `AdwNavigationSplitView`, [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
`AdwNavigationSplitView` defines the same actions as `AdwNavigationView`, 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`.
`AdwNavigationSplitView` as `GtkBuildable`
The `AdwNavigationSplitView` 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
`AdwNavigationSplitView` 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
`AdwNavigationSplitView` uses the `GTK_ACCESSIBLE_ROLE_GROUP` role.