Footer

• Offer structured access to important but non-primary links
• Provide official department information and credibility
• Support user needs such as contact, feedback, and policies
• Serve as a consistent endpoint across all pages

The footer is divided into clearly defined sections, each serving a distinct purpose:

• Fixed to the bottom of the viewport
• Horizontally aligned action items
• Touch-friendly button sizes
• Icon-first with optional labels
• Designed to visually resemble mobile bottom navigation patterns
• Merge to the footer top bar once reach to footer component

Typical actions include:

• Services
• Contact / Phone
• Feedback & Complaints
• Digital Satisfaction Survey
• Share
• Other user-critical links

• Hidden on initial page load
• Appears once the user scrolls 100% of the viewport height
• Remains visible while scrolling
• Does not overlap critical content (respects safe areas)
• Supports tap/click actions and expandable menus if required

• Always positioned at the bottom of the page
• Persistent across all pages unless explicitly disabled
• Must not conflict with system UI (mobile safe areas)
• Should remain visible during vertical scrolling

• Minimum touch target sizes for all actions
• Clear iconography with accessible labels
• Keyboard navigable
• Screen reader friendly with descriptive action names
• High contrast against page background

• Fully supports LTR and RTL layouts
• Icon order and alignment should adapt automatically
• Text labels switch based on active language
• Icons should remain universally recognizable

• Use clear, recognizable icons
• Maintain consistency across pages
• Avoid overcrowding the bar
• Highlight primary actions visually
• Test visibility against page content and scroll behavior

• On pages with full-screen or immersive experiences
• Where critical actions are already persistently available
• If it conflicts with accessibility or content readability