0
# Navigation Controls
1

2
Header controls for search functionality, settings toggles, and navigation elements designed for documentation websites and developer tools.
3

4
## Capabilities
5

6
### SearchControl
7

8
Search input control component for triggering search functionality with keyboard shortcut display.
9

10
```typescript { .api }
11
/**
12
 * Search input control that displays search prompt with keyboard shortcut
13
 * Renders as a button that can be clicked to open search functionality
14
 */
15
interface SearchControlProps extends BoxProps, ElementProps<'button'> {}
16

17
function SearchControl(props: SearchControlProps): JSX.Element;
18
```
19

20
**Usage Examples:**
21

22
```typescript
23
import { SearchControl } from "@mantine/ds";
24

25
function Header() {
26
  return (
27
    <SearchControl 
28
      onClick={() => {
29
        // Open search modal or navigate to search page
30
        openSearchModal();
31
      }}
32
    />
33
  );
34
}
35
```
36

37
### HeaderControl
38

39
Generic header control wrapper that provides consistent styling and tooltip functionality.
40

41
```typescript { .api }
42
/**
43
 * Generic wrapper for header control buttons with tooltip support
44
 * @param tooltip - Tooltip text displayed on hover
45
 * @param children - Control content (usually an icon)
46
 */
47
interface HeaderControlProps extends BoxProps {
48
  tooltip: string;
49
  children: React.ReactNode;
50
}
51

52
function HeaderControl(props: HeaderControlProps): JSX.Element;
53
```
54

55
**Usage Examples:**
56

57
```typescript
58
import { HeaderControl } from "@mantine/ds";
59
import { IconSettings } from "@tabler/icons-react";
60

61
function SettingsControl() {
62
  return (
63
    <HeaderControl tooltip="Open settings">
64
      <IconSettings size={18} />
65
    </HeaderControl>
66
  );
67
}
68
```
69

70
### ColorSchemeControl
71

72
Control for toggling between light and dark color schemes.
73

74
```typescript { .api }
75
/**
76
 * Toggle control for switching between light and dark color schemes
77
 * Automatically handles color scheme state and provides appropriate icon
78
 */
79
function ColorSchemeControl(): JSX.Element;
80
```
81

82
### DirectionControl
83

84
Control for toggling text direction (LTR/RTL) for internationalization.
85

86
```typescript { .api }
87
/**
88
 * Control for toggling text direction between left-to-right and right-to-left
89
 * Useful for testing RTL languages and internationalization
90
 */
91
function DirectionControl(): JSX.Element;
92
```
93

94
### DiscordControl
95

96
Pre-configured control button that links to Discord community.
97

98
```typescript { .api }
99
/**
100
 * Pre-configured header control that links to Discord community
101
 * Uses Discord branding and opens link in new tab
102
 * @param link - Optional Discord invite link, defaults to meta.discordLink
103
 */
104
function DiscordControl(props: { link?: string }): JSX.Element;
105
```
106

107
### GithubControl
108

109
Pre-configured control button that links to GitHub repository.
110

111
```typescript { .api }
112
/**
113
 * Pre-configured header control that links to GitHub repository
114
 * Uses GitHub branding and opens link in new tab
115
 * @param link - GitHub repository URL
116
 */
117
function GithubControl(props: { link: string }): JSX.Element;
118
```
119

120
### HeaderControls
121

122
Container component for organizing multiple header controls.
123

124
```typescript { .api }
125
/**
126
 * Container component for organizing multiple header controls
127
 * Provides consistent spacing and layout for control groups
128
 */
129
interface HeaderControlsProps extends BoxProps {
130
  onSearch?: () => void;
131
  githubLink?: string;
132
  withDirectionToggle?: boolean;
133
  withSearch?: boolean;
134
  withGithub?: boolean;
135
  withDiscord?: boolean;
136
  discordLink?: string;
137
  withColorScheme?: boolean;
138
}
139

140
function HeaderControls(props: HeaderControlsProps): JSX.Element;
141
```
142

143
### SearchMobileControl
144

145
Mobile-optimized version of the search control.
146

147
```typescript { .api }
148
/**
149
 * Mobile-optimized search control with touch-friendly sizing
150
 * Designed for responsive header layouts
151
 * @param onSearch - Callback function when search is triggered
152
 */
153
function SearchMobileControl(props: { onSearch: () => void }): JSX.Element;
154
```
155

156
**Usage Examples:**
157

158
```typescript
159
import { 
160
  HeaderControls,
161
  ColorSchemeControl,
162
  DirectionControl,
163
  DiscordControl,
164
  GithubControl,
165
  SearchMobileControl
166
} from "@mantine/ds";
167

168
function MobileHeader() {
169
  return (
170
    <HeaderControls
171
      withSearch
172
      withColorScheme
173
      withDirectionToggle
174
      withDiscord
175
      withGithub
176
      githubLink="https://github.com/mantinedev/mantine"
177
      onSearch={() => openSearchModal()}
178
    >
179
      {/* Custom controls can still be added as children */}
180
    </HeaderControls>
181
  );
182
}
183

184
// Alternative: Individual controls
185
function CustomHeader() {
186
  return (
187
    <div>
188
      <SearchMobileControl onSearch={() => openSearchModal()} />
189
      <ColorSchemeControl />
190
      <DirectionControl />
191
      <DiscordControl link="https://discord.gg/mantine" />
192
      <GithubControl link="https://github.com/mantinedev/mantine" />
193
    </div>
194
  );
195
}
196
```
197

198
## Types
199

200
```typescript { .api }
201
type BoxProps = Record<string, any>;
202
type ElementProps<T extends keyof JSX.IntrinsicElements, U extends string = never> = 
203
  Omit<JSX.IntrinsicElements[T], U>;
204
```