Dark Header
Professional dark header with search, navigation links, and primary action
A fully featured dark header component for Power Apps. Features a responsive search bar with placeholder text, dynamic navigation links, and a primary action button. Perfect for admin panels, dashboards, and application headers.
Search bar
Dynamic nav links
Primary button
Accent color
Responsive width
Dark theme
Key Properties
BackgroundColor#141F30
AccentColor#6366F1
BorderColor#2A3749
Links[Table]
PrimaryButtonText"+ New project"
SearchPlaceholder"Search projects..."
OnLinkSelectEvent
OnPrimarySelectEvent
Requires Modern controls enabled. Go to Settings → Updates → Preview → Modern controls and themes.
Component YAML
Copy-paste readyComponentDefinitions:
DarkHeader:
DefinitionType: CanvasComponent
AccessAppScope: true
CustomProperties:
AccentColor:
PropertyKind: Input
DisplayName: Accent Color
Description: Primary action color
DataType: Color
Default: =RGBA(99, 102, 241, 1)
BackgroundColor:
PropertyKind: Input
DisplayName: Background Color
Description: Header background color
DataType: Color
Default: =RGBA(20, 31, 48, 1)
BorderColor:
PropertyKind: Input
DisplayName: Border Color
Description: Header border color
DataType: Color
Default: =RGBA(42, 55, 73, 1)
Links:
PropertyKind: Input
DisplayName: Links
Description: Dynamic header navigation links
DataType: Table
Default: |-
=Table(
{ID: 1, Title: "Documentation"},
{ID: 2, Title: "Community"},
{ID: 3, Title: "Support"}
)
OnLinkSelect:
PropertyKind: Event
DisplayName: On Link Select
Description: Runs when a header navigation link is selected
ReturnType: None
Default: =false
OnPrimarySelect:
PropertyKind: Event
DisplayName: On Primary Select
Description: Runs when the primary button is selected
ReturnType: None
Default: =false
PrimaryButtonText:
PropertyKind: Input
DisplayName: Primary Button Text
Description: Primary action button text
DataType: Text
Default: ="+ New project"
SearchPlaceholder:
PropertyKind: Input
DisplayName: Search Placeholder
Description: Placeholder text shown in the search field
DataType: Text
Default: ="Search projects..."
Properties:
Fill: =DarkHeader.BackgroundColor
Height: =60
Width: =1000
Children:
- cntHeader:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =DarkHeader.BorderColor
DropShadow: =DropShadow.None
Fill: =DarkHeader.BackgroundColor
Height: =Parent.Height
RadiusBottomLeft: =0
RadiusBottomRight: =6
RadiusTopLeft: =0
RadiusTopRight: =6
Width: =Parent.Width
Children:
- cntSearch:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(49, 63, 82, 1)
BorderThickness: =1
DropShadow: =DropShadow.None
Fill: =RGBA(34, 48, 68, 1)
Height: =36
RadiusBottomLeft: =7
RadiusBottomRight: =7
RadiusTopLeft: =7
RadiusTopRight: =7
Width: =Min(420, Max(220, Parent.Width - 620))
X: =28
Y: =(Parent.Height - Self.Height) / 2
Children:
- imgSearchIcon:
Control: Image@2.2.3
Properties:
BorderColor: =Color.Transparent
Height: =18
Image: |-
="data:image/svg+xml;utf8," &
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#64748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>" &
"<circle cx='11' cy='11' r='7'/>" &
"<path d='M20 20l-4-4'/>" &
"</svg>"
)
Width: =18
X: =13
Y: =(Parent.Height - Self.Height) / 2
- txtSearchInput:
Control: ModernTextInput@1.1.1
Properties:
Color: =RGBA(226, 232, 240, 1)
Fill: =DarkHeader.BackgroundColor
Font: =Font.'Segoe UI'
FontWeight: =""
Height: =Parent.Height - 2
MaxLength: =-1
Placeholder: =DarkHeader.SearchPlaceholder
RadiusBottomLeft: =7
RadiusBottomRight: =7
RadiusTopLeft: =7
RadiusTopRight: =7
Size: =0
TriggerOutput: =TriggerOutput.FocusOut
Width: =Parent.Width - 44
X: =38
Y: =1
- galHeaderLinks:
Control: Gallery@2.15.0
Variant: Horizontal
Properties:
Fill: =Color.Transparent
Height: =Parent.Height
Items: =DarkHeader.Links
ShowScrollbar: =false
TemplatePadding: =0
TemplateSize: =100
Width: =300
X: =Parent.Width - 455
Children:
- txtHeaderLink:
Control: Text@0.0.51
Properties:
Align: ='TextCanvas.Align'.Center
Font: =Font.'Segoe UI'
FontColor: =RGBA(226, 232, 240, 1)
Height: =Parent.TemplateHeight
Size: =10
Text: =ThisItem.Title
VerticalAlign: =VerticalAlign.Middle
Weight: ='TextCanvas.Weight'.Semibold
Width: =Parent.TemplateWidth
- btnHeaderLinkClick:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =Color.Transparent
BorderStyle: =BorderStyle.None
BorderThickness: =0
Color: =Color.Transparent
Fill: =Color.Transparent
FocusedBorderColor: =Color.Transparent
Height: =Parent.TemplateHeight
HoverBorderColor: =Color.Transparent
HoverColor: =Color.Transparent
HoverFill: =RGBA(255, 255, 255, 0.04)
OnSelect: =DarkHeader.OnLinkSelect()
PressedBorderColor: =Color.Transparent
PressedColor: =Color.Transparent
PressedFill: =RGBA(255, 255, 255, 0.08)
Text: =""
Width: =Parent.TemplateWidth
- btnPrimaryAction:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =Color.Transparent
BorderStyle: =BorderStyle.None
BorderThickness: =0
Color: =RGBA(255, 255, 255, 1)
Fill: =DarkHeader.AccentColor
Font: =Font.'Segoe UI'
Height: =36
HoverBorderColor: =Color.Transparent
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =ColorFade(DarkHeader.AccentColor, -10%)
OnSelect: =DarkHeader.OnPrimarySelect()
PressedBorderColor: =Color.Transparent
PressedColor: =RGBA(255, 255, 255, 1)
PressedFill: =ColorFade(DarkHeader.AccentColor, -20%)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Size: =10
Text: =DarkHeader.PrimaryButtonText
Width: =120
X: =Parent.Width - Self.Width - 28
Y: =(Parent.Height - Self.Height) / 2