diff --git a/pagetop/src/html.rs b/pagetop/src/html.rs
index 5a2bab3d..298fd41d 100644
--- a/pagetop/src/html.rs
+++ b/pagetop/src/html.rs
@@ -28,6 +28,9 @@ pub use opt_translated::OptionTranslated;
 mod opt_classes;
 pub use opt_classes::{ClassesOp, OptionClasses};
 
+mod opt_component;
+pub use opt_component::OptionComponent;
+
 pub mod unit;
 
 pub enum PrepareMarkup {
diff --git a/pagetop/src/html/opt_component.rs b/pagetop/src/html/opt_component.rs
new file mode 100644
index 00000000..059f2e3e
--- /dev/null
+++ b/pagetop/src/html/opt_component.rs
@@ -0,0 +1,45 @@
+use crate::core::component::{ArcTypedComponent, ComponentTrait, Context};
+use crate::fn_builder;
+use crate::html::{html, Markup};
+
+pub struct OptionComponent<C: ComponentTrait>(Option<ArcTypedComponent<C>>);
+
+impl<C: ComponentTrait> Default for OptionComponent<C> {
+    fn default() -> Self {
+        OptionComponent(None)
+    }
+}
+
+impl<C: ComponentTrait> OptionComponent<C> {
+    pub fn new(component: C) -> Self {
+        OptionComponent::default().with_value(Some(component))
+    }
+
+    // OptionComponent BUILDER.
+
+    #[fn_builder]
+    pub fn alter_value(&mut self, component: Option<C>) -> &mut Self {
+        if let Some(component) = component {
+            self.0 = Some(ArcTypedComponent::new(component));
+        } else {
+            self.0 = None;
+        }
+        self
+    }
+
+    // OptionComponent GETTERS.
+
+    pub fn get(&self) -> Option<ArcTypedComponent<C>> {
+        if let Some(value) = &self.0 {
+            return Some(value.clone());
+        }
+        None
+    }
+
+    pub fn render(&self, cx: &mut Context) -> Markup {
+        match &self.0 {
+            Some(component) => component.render(cx),
+            _ => html! {},
+        }
+    }
+}
diff --git a/pagetop/src/html/opt_translated.rs b/pagetop/src/html/opt_translated.rs
index 396fd364..c2424e9e 100644
--- a/pagetop/src/html/opt_translated.rs
+++ b/pagetop/src/html/opt_translated.rs
@@ -1,5 +1,5 @@
 use crate::fn_builder;
-use crate::html::Markup;
+use crate::html::{html, Markup};
 use crate::locale::{L10n, LanguageIdentifier};
 
 #[derive(Default)]
@@ -27,10 +27,10 @@ impl OptionTranslated {
         None
     }
 
-    pub fn escaped(&self, langid: &LanguageIdentifier) -> Option<Markup> {
-        if let Some(value) = &self.0 {
-            return Some(value.escaped(langid));
+    pub fn escaped(&self, langid: &LanguageIdentifier) -> Markup {
+        match &self.0 {
+            Some(value) => value.escaped(langid),
+            _ => html! {},
         }
-        None
     }
 }