gradio-horizontal-bar

A versatile, collapsible layout component for Gradio 6 apps using gr.HTML. It allows you to create fixed panels at the top or bottom of the screen that can contain any other Gradio component.

Perfect for floating toolbars, real-time log consoles, settings panels, or secondary navigation bars that stay out of the way until needed.

Features and Key Characteristics

• Dual-Positioning: Easily switch between top and bottom placement with a single property.
• Native Container Support: Works as a standard Gradio context manager (with HorizontalBar():), allowing you to nest any Gradio component inside.
• Gradio 6 Theme Integration: Uses native CSS variables (--background-fill, --color-accent) to match any theme perfectly in Light or Dark mode.

Installation

pip install gradio-horizontal-bar

Usage

Mode 1: Top Floating Toolbar

import gradio as gr
from gradio_horizontal_bar import HorizontalBar

with gr.Blocks() as demo:
    with HorizontalBar(position="top", height=85, open=False):
        with gr.Row():
            gr.Button("▶️ Start Process", variant="primary")
            gr.Button("⏹️ Stop All")
            
    gr.Image("https://picsum.photos/1200/600")
    
demo.launch()

Mode 2: Bottom Log Console (Pre-opened)

import gradio as gr
from gradio_horizontal_bar import HorizontalBar

with gr.Blocks() as demo:
    gr.Markdown("# Main Content Area")
    
    with HorizontalBar(position="bottom", height=250, open=True):
        gr.Markdown("### 📝 System Logs")
        gr.Textbox(lines=8, interactive=False, placeholder="Waiting for logs...")
        
demo.launch()

License

Apache 2.0